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