CSS two columns
Posted: Thu Feb 15, 2007 11:46 pm
I have a work area which is made of two columns:
1) Variable width left aligned
2) Fixed width (200px) right aligned
The variable width column should obviously fill the width of the remaining screen but the fixed width is always 200px but it's height should always be flush with the left hand side content and/or repeat until the footer/bottom of visible screen space.
I understand I am to use a faux column technique for the right, in that I will use an image repeat to acquire that effect.
This worked in IE but not even close in FF:
edit: Just discovered a new problem...I wrapped the above HTML in a parent DIV which height is set to 100% but because of a header which comes before it (80px) the footer is now always pushed out of sight. I tried setting height: 100% and margin-bottom: -80px which worked in IE but not in FF...I think I need this wrapper in order to use the faux column technique???
How can I do this so it's cross browser friendly? Bah...
Thanks again
Cheers
1) Variable width left aligned
2) Fixed width (200px) right aligned
The variable width column should obviously fill the width of the remaining screen but the fixed width is always 200px but it's height should always be flush with the left hand side content and/or repeat until the footer/bottom of visible screen space.
I understand I am to use a faux column technique for the right, in that I will use an image repeat to acquire that effect.
This worked in IE but not even close in FF:
Code: Select all
#body {
background-color: red;
}
#left {
float: right;
width: 180px;
height: 100%;
margin-bottom: -80px;
background-color: #FFFBE7;
}
Code: Select all
<div id="body">
<div id="left">
This is the left panel and is fixed in width
</div>
This is the primary content area and should flow "around" the left floating DIV which has it's height set to 100%
</div>
How can I do this so it's cross browser friendly? Bah...
Thanks again
Cheers