min and max width centered layout that works for ie
Moderator: General Moderators
min and max width centered layout that works for ie
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)?
I know I'm the last person to comment on CSS based layouts, but why wouldn't this work:
I seem to remember that the margins won't work 100% properly without a "width" property set - but I'm not totally sure.
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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Oh no, please no tables I'll do anything (I'll even code for yaThe 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.
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".
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:But do a search for IE expression min/max width and you'll find out the specific rules.
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");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:no no no tables![]()
Jello comes to the rescue http://positioniseverything.net/article ... -expo.html
Meh... this requires javascript. Something I'd really like to avoid for something as important as layout.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:But do a search for IE expression min/max width and you'll find out the specific rules.Code: Select all
width: expression(document.body.clientWidth < 800? "800px" : document.body.clientWidth > 1400? "1400px" : "auto");
Yeah it a bit lame but I prefer it over using JavaScript.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.
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

