matt1027, I'm sory, yestarday was kind of late, I think I replyed only to you and not to the list; wich is terribly unpolite, anyway, I complicated it to much and forgot the simplest solution:
However flexilbe a layout, if you do not want it to get smaller then some size, you just give it some block level element with that size fixed with, able to get to the pages limits, anything will do, an image, an header, it may even be height:0 div, but I gess you probably already have such an element. For the case it is usefull for anyone else, I'll paste it at the end of this message. Regards isabel On Mon, May 21, 2012 at 3:44 AM, matt1027 <[email protected]> wrote: > I've got a flexible page layout that uses a max width style to keep it > from getting overly wide. > > > max-width: 980px; > width:expression(document.**body.clientWidth > 980? "980px": "auto"); > > > I see now that I need to also have a minimum width because it "breaks if > it gets too narrow. > > What would be the best way to do that? Is there something I can add to > what I'm already using? It works very well across all browsers. > > Thanks, > Matt > > ______________________________**______________________________**__________ > css-discuss [[email protected]] > http://www.css-discuss.org/**mailman/listinfo/css-d<http://www.css-discuss.org/mailman/listinfo/css-d> > List wiki/FAQ -- > http://css-discuss.incutio.**com/<http://css-discuss.incutio.com/> > List policies -- > http://css-discuss.org/**policies.html<http://css-discuss.org/policies.html> > Supported by evolt.org -- > http://www.evolt.org/help_**support_evolt/<http://www.evolt.org/help_support_evolt/> > ______________________________________________________________________ pasting previous message sent personaly and not to the list: Matt1027, width:expression(document.body.clientWidth > 980? "980px":"auto"); will only work in IE and shall invalidate the stylesheet. For min-width, you can always do: width:expression(document.body.clientWidth < 320? "320":"auto"); Yet, IE 6 treats with as min-width anyway. IE supports min-width and min-height since version 7 for standardmode, so you could link an ie lower then 7 with: <!--[if lte IE 6]><link rel="stylesheet"type="text/css" href="css/ielte6.css"/><![endif]--> on the documents head. Most recent smart phones and tablets support both min-width andmin-height. You can use media queries to style the layout differently for smalerdevices, say simplifying the navigation bars, sending smaller images and soon. You can check google for "responsive design". Most modern mobile devices understand html5 and media queries. You can load them like <link rel="stylesheet" type="text/css"media="screen and (max-device-width: 480px)"href="mobilesmall.css" /> or insert the media query on the css itself: @media screen and (max-device-width: 480px) { .seila { float:none; }} But that can take a lot of work and testing to be somewhatsafe. Phones will decide how to render your site if you do nothing: Ambitious ones will try to render it as they were a pc, usually shrinkingthe site. Humbler ones will do their best to render it and provide scroll bars whenneeded. Users can usually zoom in or out, so things can eventually fixthemselves. But you must remmember that the viewport on a mobile device is not a desktop window. Infact, mobile devices have usually two viewports: the HTML size and the visible region. And also, that mobiles can flip, so you care more about width then height and that some devices use a pixel size different than 1, so they can say they are 320 and be 640px wide.  Theres an old doctype specific for mobile devices, not the best solution and not future proof, and it involves a specific page or a server side include.  You can use metatags to tell mobile devices not to optimize your site (not a good idea if the site itself isn't supporting them, better let them do what they do...) <meta name="HandheldFriendly" content="true"/> (an old meta tag, will tell the mobile browser not to adapt to your site,so you'll get scroll bars). <meta name="MobileOptimized" content="320"/> (a more recente one, will tel the browser your site will works well ondevices above 320px). <meta name="viewport" content="width=device-width,width=960, initial-scale=1.0" /> (developed by mac for ipads, most modern devices adopted it; there are more parameters then the ones in the exemple, where it's saying the ideal width for your site and that it should beloaded with no scaling, but is letting users scale it if they will - you can, but it is not agood idea to prevent scaling). And, about old and new phones, phones aren't exactly made to last forever, that would be a bad investment for their makers, so an old mobile will have about 5 years. And most important, on the small screen scene, the layout size isn't thebig issue, that you can more or less solve with media queries, but its the features. You can check supporthttp://www.quirksmode.org/mobile/ and for userhttp:// caniuse.com". Hope this helps, isabel ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
