Hi, I've just designed a site in css. It is a 3 column design, with 3 div's like this: 30% -- 40% -- 30% It works great from 800x600 upto 1680x1050 BUT anything below 800x600 and the text starts getting out of line, and just goes wrong. What i would like to do is make it not go any smaller then 750px. I'd like to do this in css.. (I "think" i could do it in javascript using some code to check browser size, but i dont really want to do that) Also, is it possible to make the centre column not go any wider then a certain amount? to stop all text from just going into one-long-line??? I like my site, it's "valid" css, and just needs these view changes doing. Thanks for any help
I Don't think that there are OS that allow resolution that is smaller than 800*600. And if there is, The browser window will be so small that surfing to any site will be a annoying experience.
This is a simple one, but you'll need to test in every browser esp IE6 because it has issues (of course). If you set min-width: 760px; on the container which wraps the page (I wouldn't stick it on the body, but I think you could... but better wrap the whole page first), it will stop crushing your site and force a scrollbar at the bottom, preserving your layout. The page can still grow. IE6 thinks width=min-width and doesn't recognise min-width to mean anything at all. Most people use this handy Javascript-in-the-CSS thing (which only IE allows anyway, as I understand it). This is NOT a Javascript in your HTML or on your server, it's simply sitting in the CSS for IE6 only, and yes either Javascript is needed or you'll just have to give IE6 a set width from which it cannot deviate (for instance you could do this: * html #wrapper {width: 760px;} which will stick it there. All other browsers will honour the min-width and let your page expand. For IE6 (and I got this from deathshadow... I've seen some other versions of it out there as well, but they all looked like more code, and I know this works as I've used it on about 4 sites already... it's nice): * html #wrapper { width: 760px; <-- if IE6 doesn't have JS, it uses this as I said above width: expression((document.body.clientWidth>1400) ? "1400px" : ((document.body.clientWidth>800) ? "auto" : "760px")); } Code (markup): I don't write Javascript so I don't know how to modify this so it only sets a min-width (the original was made for min and max width), so I set the max width at 1400 px which is the width of my laptop. I guess you could set it bigger. Test test test! Some JS guru will hopefully step in here and show the way to only min or only max-widths...
Users can shrink a window as small as they like. Say you drag it abit smaller, that is smaller then 800x600. Thats what i mean. I'd just like it to not get any smaller then 760 width ways -- if the window is resized any smaller then that, i want it just to become fixed with. Cheers for the help! edit: Stomme poes -- you posted that just as i was replying to Morishani. That looks like exactly what i want to do! I'll try it now. If it only works in ie6 thats not too good, but i will test it in ie7 and firefox Thanks again
IE7, FF, Opera, Konqueror, Safari, etc will all obey the min-width. Play with what width you actually want in all those browsers, as they all have different amounts of "window chrome" (the stuff on the browser border). You might end up using something lower than 760px depending on how it looks.
Cheers man. IE7, FF and IE6 must cover about 99% of users anway! so thats great. It actually looks good down to about 700 -- so i'll just set it to that. I doubt any browser will have that much "window chrome" Thanks again. Rep given
You need to set your page in a container that has a minimum width. As you are aware this will not work in pre-IE7 so this is how I used a work around: First the css: .width {width:100%; min-width:777px;} /* the bodge for IE6 browsers */ * html .minwidth {border-left:777px solid #fff; position:relative; float:left; z-index:1;} * html .container {margin-left:-777px; position:relative; float:left; z-index:2;} Code (markup): then the code for the page: <body> <div class="width"> <div class="minwidth"> <div class="container"> Code (markup): You can see it in action on the cavalier mailing link on my signature. Cheers CW
Thats another good example - thanks CanaryWoolf (rep given also) I dont know which would be best to use really, the javascript in css example by Stomme poes, or yours. Yours does look exactly like im trying to do, looking at your mailing website. I'm going to download IE6 and give it a try. Cheers.
Hi Coco Couple of points - minwidth does not work in IE6 and for your interest here is the most recent breakdown of browsers and screen resolutions on one of my sites, which should be fairly representative: [B]Browsers[/B] 1. Internet Explorer 81.14% 7.0 58.98% 6.0 40.67% 5.01 0.18% 5.5 0.18% 2. Firefox 12.71% 3. Mozilla 3.14% 4. Safari 2.43% 5. Konqueror 0.57% Code (markup): [B]Screen Resolutions[/B] 1. 1024x768 42.43% 2. 1280x1024 22.71% 3. 1280x800 14.14% 4. 800x600 5.57% 5. 1440x900 4.71% 6. 1152x864 3.43% 7. 1680x1050 2.71% 8. 1920x1200 1.00% 9. 1280x768 0.86% 10. 1280x960 0.71% Code (markup): So although 800x600 makes up an ever decreases proportion of web users, remember the figures shown are the screen resolution, not the size of the browser 'window' (not always open to 100%) Cheers CW
You can use whichever you want, Coco-- that CanaryWoolf one is pretty clever! And uses no IE6javascript (which as far as I know would not work on an IE6 machine with Javascript turned off). Yeah, unfortunately IE6 use is still high-- in my country it's like 70% plus (including IE7 the total IE use is 90% plus-- but we're behind other european countries in that regard). Canary Woolf, where'd you find that neat trick? Or did you figure it out yourself?
I'd love to claim the credit for it but I found it after much hair pulling (and there's not much left now!) and tinkered with the css to suit the site. The site is nearly 2 years old now and you're right that it does work perfectly in all browsers with or without Javascript. CW