css fluid layout HELP!
- Started
- Last post
- 17 Responses
- nocomply
Calling all CSS jedi masters.
In need of a 2 column layout. One column is fluid while the other is fixed at around 200px. The columns must stay contained in their own space. This means that the fluid column cannot wrap around the fixed column if it is longer than the fixed column.
I know about ALA's holy grail article, but that is 3 columns and for the life of me I cannot get it to work with 2 in IE.
Help me please!! Before I get so frustrated that I release some fluid in my pants.
- brandelec0
you can use floating divs and give the second div (right column) a width of 200, no?
- nocomply0
brandelec - you can do what you're saying and it will work....until the div with no specified width (the "fluid" div) becomes longer than the fixed div.
When that happens, the fluid div will wrap into the fixed div's space beneath the fixed div.
This is my problem right now.
- Nairn0
Oops.
- heavyt0
if the fixed col is on the right, then you can just set the left column to margin-left:200px; and dont define a width for it.
since it is a block level elem, it will take 100% of teh available space.
- jakeyj0
what heavyt wrote
- jakeyj0
wait - if the fixed column is on the right, you'd with the margin of the left (liquid) column to have a margin-right of 200px
- nocomply0
thanks for the help guys. i think i got it working, but its a bit of a non-traditional solution.
the margin-right of 200px for the liquid column seemed to require that I add a margin-left: -200px for the fixed column. There is also some other weird stuff going on in there.
I will post the solution code once i clean it up a bit. maybe you guys will be able to come up with something even better.
- jakeyj0
oh yeah bad, it does have to be a negative margin. here's my (really quick) css:
#main {
float: left;
width:100%;
margin-right: -200px;
background: green;
}#right {
clear: right;
float: left;
width: 200px;
background: yellow;
}
- nocomply0
http://www.downforwhatever.net/l…
Ok that's what I got so far. I had to make one column float left and the other float right for it to work nicely in both IE and FF.
Also...I'm using a min-width, max-width hack for IE borrowed from http://www.cameronmoll.com/archi…
Everything seems to work perfectly for me right now, despite the kind of weird css.
- jakeyj0
looks like you got it going. nice
did you check IE 5.5? I often have problems in 5.5 when I float elements in opposite directions.
- nocomply0
haha..no. I don't even have it installed. I figure such a small percentage of people use it that it wasn't worth the trouble.
Is there a way i can have both IE 5.5 and 6 installed at the same time? If so I'll check it out and see. This layout is going to be used for one of our company's biggest money-maker sites.
- flavorful0
Virtual PC.
http://www.microsoft.com/windows…
...May not be the easiest solution, but is easier than buying a crap computer just to put IE 5.5 on.
- jakeyj0
multiple IE
- flavorful0
jakey - you use that?
- jakeyj0
i use it sparingly yeah
- airey0
shows screen grabs of PC + Mac - all browsers, flash and noflash.
excellent solution that has saved me massive css headaches over the last few months.