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 :twisted:

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. :cry:

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. :cry:
Oh no, please no tables I'll do anything (I'll even code for ya :P)... 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 :D

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
matthijs wrote:no no no tables :D

Jello comes to the rescue http://positioniseverything.net/article ... -expo.html
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 8)

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. ImageImage

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. ImageImage
Oh we all feel like that :P