Page 1 of 2
min and max width centered layout that works for ie
Posted: Wed Apr 25, 2007 12:24 pm
by Luke
Does anybody know of a css-only (no javascript) solution to allow a layout with a min-width, a max-width, and auto left and right margins (in other words, centered)?
Posted: Wed Apr 25, 2007 2:04 pm
by pickle
I know I'm the last person to comment on CSS based layouts, but why wouldn't this work:
Code: Select all
#centered{
min-width:400px;
max-width:900px;
margin-left:auto;
margin-right:auto;
}
I seem to remember that the margins won't work 100% properly without a "width" property set - but I'm not totally sure.
Posted: Wed Apr 25, 2007 2:35 pm
by Luke
that works great for standards-compliant browsers, but ie6 doesn't know what min-width and max-width are
Posted: Wed Apr 25, 2007 2:39 pm
by pickle
*Ahem*
use tables 
Posted: Wed Apr 25, 2007 2:44 pm
by Luke
well.. if I can't find a solution for this soon, I'm going to have to use tables as well.

Posted: Wed Apr 25, 2007 4:16 pm
by Oren
The Ninja Space Goat wrote:well.. if I can't find a solution for this soon, I'm going to have to use tables as well.

Oh no, please no tables I'll do anything (I'll even code for ya

)... Just don't use tables.
Well, this problem is a tricky one... please tell us in more detail what exactly you need/want and what are the considerations/requirements.
Give as much information as you can cause I'm not sure there is a way using CSS only to achieve this and therefore the solution might be some kind of a trade-off between the different requirements that you have and other considerations.
Edit: Take a look at the CSS for
http://www.dynamized.com/dynamized/ (which, finally, will be launched soon!). Look around "#container".
Posted: Wed Apr 25, 2007 4:34 pm
by matthijs
no no no tables
Jello comes to the rescue
http://positioniseverything.net/article ... -expo.html
Or use IE properties for min/max width. If you want your css to still validate, put them in their own IE sheets, brought to IE with conditional comments. I haven't used them in a while, but it's something like:
Code: Select all
width: expression(document.body.clientWidth < 800? "800px" : document.body.clientWidth > 1400? "1400px" : "auto");
But do a search for IE expression min/max width and you'll find out the specific rules.
Posted: Wed Apr 25, 2007 4:34 pm
by Luke
well I'm not going to serve a fixed-width to ie. That's lame. I want my site to do exactly what yours does except without serving fixed-width to IE.
Posted: Wed Apr 25, 2007 4:37 pm
by Luke
Hmm... that looks like precisely what I need. I've always had a hard time grasping negative margins. Mostly because I haven't had the time to thoroughly research them. Thanks... I'll give it a go.
matthijs wrote:Or use IE properties for min/max width. If you want your css to still validate, put them in their own IE sheets, brought to IE with conditional comments. I haven't used them in a while, but it's something like:
Code: Select all
width: expression(document.body.clientWidth < 800? "800px" : document.body.clientWidth > 1400? "1400px" : "auto");
But do a search for IE expression min/max width and you'll find out the specific rules.
Meh... this requires javascript. Something I'd really like to avoid for something as important as layout.
Posted: Wed Apr 25, 2007 5:36 pm
by Oren
The Ninja Space Goat wrote:well I'm not going to serve a fixed-width to ie. That's lame. I want my site to do exactly what yours does except without serving fixed-width to IE.
Yeah it a bit lame but I prefer it over using JavaScript.
Also, note that it's only like this (fixed) with IE < 7, with IE7 or with any other non-IE browser it works like a charm

Posted: Wed Apr 25, 2007 5:37 pm
by Luke
darn... even the jello requires javascript for max-width. Man... IE sucks so bad
Posted: Wed Apr 25, 2007 5:44 pm
by Oren
As I said, there is no way to do it using only CSS as far as I know

Posted: Wed Apr 25, 2007 5:45 pm
by Luke
yea, I'm going with the jello solution anyway. Damn IE
Posted: Wed Apr 25, 2007 5:55 pm
by Luke
The jello solution also causes a lot of unwanted side-effects, like the ability to put this above and below the container. It causes anything you put above or below the container gets squished and all kinds of weird things. I can't even explain how much I hate IE.


Posted: Wed Apr 25, 2007 6:38 pm
by Oren
The Ninja Space Goat wrote:I can't even explain how much I hate IE.


Oh we all feel like that
