Forum Moderators: not2easy
I'm trying to make an old site that has a 3 column fluid layout not mess up when the window size is reduced below a certain size. I've recently added some graphics to the central column, that I'd like to keep but once the central column is reduced to around 400px the fixed width left and right columns mess up the whole layout by overlapping other bits of content.
If I had it my way I'd go for a fixed width all round but I don't, so does anyone know a way of creating a minimum width for a <div>, so it can still stretch, but only shrinks down to a certain width, at which point the layout reacts like a fixed layout and the horizontal scroll bar kicks in.
At the moment I have:
.leftColumn
{
width: 155px;
float: left;
}
.rightColumn
{
width: 155px;
float: right;
}
#main
{
margin: 0px 175px 0px 165px;
}
where main=central column.
I tried using an old school spacer image but that didn't work.
Thanks for your help everyone.
horizontal scroll bar kicks in
EVIL! EVIL! EVIL!
But I guess if there's no other way then what the hell.
I think you've pretty much got it, you could use
min-width: 400px;but it doesn't work in IE, so the 400px spacer is the best way. To make the page scroll use:
#main {
margin: 0px 175px 0px 165px;
overflow: auto;
}
That shouldn't create a vertical scroll as there's no height specified, if it does there is a way of making it h-scroll only but can't remember the CSS property.
p {
min-width:400px;
width:expression(document.body.clientWidth < 400? "400px": "auto" );
}
Overflow: auto, is something i didn't think of.
I've used the min-width for now. Once I found that I realised this is quite a common question and I found a few more resources. Some using javascript (for old IE's), which I wasn't keen on.
I also read [cssplay.co.uk...] but it didn't seem to work. Seemed like an odd way around the problem as well, using borders and margins.
Trouble is my style sheet is bloody massive, and I didn't make it, so I'm really looking for the simplist mist easiliy intergratable solution.
For now I'm just leaving IE _<6, until I find a simple hack, that I can apply to just one div without changing the html - if thats poss?
Hang on I think I've found a nice simple solution from MezzoBlue:
box {
width: 700px;
}
html>box {
width: auto;
min-width: 700px;
}
[mezzoblue.com...]
I'll give this one a try and see if it fits my criteria.
[edited by: SuzyUK at 7:32 am (utc) on April 25, 2007]
Wow never heard of 'expression' - i'll have to give that a try.
I wouldn't, it's IE only, and a hack. Hacks are dangerous, only use them if what you want absolutely cannot be done without, and only if you absolutely know the consequences. In this case, it can, and I doubt you do. Also, I actually don't think expressions will change the size dynamically, only on page load.
Overflow: auto, is something i didn't think of.
This coupled with your 'min-width' spacer will do what you want. Much easier than hacking with expressions.
I've used the min-width for now. Once I found that I realised this is quite a common question and I found a few more resources. Some using javascript (for old IE's), which I wasn't keen on.
Don't use min-width. IE doesn't support it, and JS is a hack. You don't need either, please try my first suggested method first.
I also read http://www.cssplay.co.uk/boxes/width.html but it didn't seem to work.
Whoa! Stay well away from Stu Nicholls experimental stuff. It's inciteful, but experimental, and very work-aroundy. I see no ends of threads saying 'I used Stu Nicholls [insert strange CSS method here] thing and I can't get it working'.
Trouble is my style sheet is bloody massive, and I didn't make it, so I'm really looking for the simplist mist easiliy intergratable solution.
That is a problem. If I was you, I'd make an offline copy of the site in a staging area, and redo the whole styling if I couldn't work with what was there.
For now I'm just leaving IE <6, until I find a simple hack, that I can apply to just one div without changing the html - if thats poss?
Personally I don't bother with anything below IE6, the stats just aren't worth the man hours it takes to make a botched site. Post-render JS is certainly an option, but you really have to know what you're doing. One method is using the 4 edge technique, requires a JS hack for IE6 which I wrote but works perfectly.
Hang on I think I've found a nice simple solution from MezzoBlue:box {
width: 700px;
}
html>box {
width: auto;
min-width: 700px;
}
I'm not sure how good support is for these selectors, I'm pretty sure IE7 is buggy, and god only knows what'll happen in IE6 for it.
[edited by: SuzyUK at 7:07 am (utc) on April 25, 2007]
Seemed like an odd way around the problem as well, using borders and margins.
Stu's method seems like it is a way to assign a width AND a min-width for IE - though I admit to not looking at that closely. His stuff really is good to learn from and use if you know what it's doing. His coding often requires doing some 'ODD' things, but there's usually a good reason for doing so which often can't be explained without a complete browser history lesson ;)
The mezzoblue method will only set a min-width (not a width)
box {
width: 700px;
}
html>box {
width: auto;
min-width: 700px;
}
There shouldn't be any problem with the mezzoblue method because the first selector will set the width for IE6 and below, IE6 and below don't honour 'width' they will stretch a box to fit larger content, in essence treating it like min-width (this is why there is so much trouble setting a width and a min-width for IE!)
the second selector
html>boxhtml box {}compliant browsers which do understand the child selector overrule the first rule by order of the cascade (and specificity) and apply the second rule unsetting the width a setting a min-width instead
Now the good news is that IE7 does read this selector AND it also supports min-width so I think the method would be as safe to use as it was back in 2004 ;)
This is just a theory thought so let us know how it goes
Suzy
I'm mostly going with Dabrowski's 09:56 post.
We've got stats showing that we're not too worried about <iE6, but I still try to consider everyone.
I'm also in agreement with the avoiding hacks at almost all costs.
The Mezzoblue solution was nearly perfect as it was easy to add to my style sheet without hassle and clean but it seems to just set my box at a fixed width in IE, which isn't what I'm after.
For now I'm going to allow IE _<6 browser users to suffer my divs overlapping if they have a res below 800px.
Its basically a tie up between letting IE_<6 <800px users seeing a fluid layout that overlaps when page size is decreased, and letting them have a fixed width with no fluidity, for me. I could use javascript but the page is allready too messy for my liking so I'm going to exclude IE_<6 <800 px wide screens from correct display. Seems like the best compromise, everyone else is OK.
According to my stats its not a massive issue and I guess people with IE_<6 and low res are used to pages displaying incorrectly by now!
Thanks everyone - useful insights for the future.
I'm mostly going with Dabrowski's 09:56 post
That wasn't 09:56, it was 21:56!
Glad you got it sorted one way or another. In 18 months or so hopefully we won't have to worry about IE6 anoymore, so I'm also looking forward to using the > selector.
