min and max width centered layout that works for ie

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

min and max width centered layout that works for ie

Post 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)?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

that works great for standards-compliant browsers, but ie6 doesn't know what min-width and max-width are
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

*Ahem*

use tables :twisted:
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

well.. if I can't find a solution for this soon, I'm going to have to use tables as well. :cry:
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post 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".
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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.
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post 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)
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

darn... even the jello requires javascript for max-width. Man... IE sucks so bad
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

As I said, there is no way to do it using only CSS as far as I know :(
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

yea, I'm going with the jello solution anyway. Damn IE
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post 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
Post Reply