Forum Moderators: not2easy
right, I may be going mad - perhaps this isn't possible or perhaps I'm missing something very obvious - but this is what I 'm trying to do
I have a 3 column CSS layout .. I want the left column (the nav) to be fixed, I want the centre column (the content) to be fixed - and I want the 3rd column (just an empty box with a pretty background) to stretch infinately off to the right hand side of the screen - no matter how far that might be.
Now, I'm sure it's a doddle with a table - just define the table as 100% width.. then define a fixed width for the first 2 <td>'s but nothing for the 3rd .. right?
but I SOOOO don't want to use a table .. I could.. it would save me so much grief.. but I resist
this is what I've got - and as you would expect - my right column is only as wide as the words I've put inside it - I've tried to strip out all the stuff that's beside the point :
please.. help!
Stratus :-)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>example</title>
<style type="text/css">
#maincontainer{width:100%;}
.rightcol{position:absolute; margin-left: 780px; background: #fcdd81 url(../img/example.jpg); height:231px; border:1px solid #fcdd81;}
.leftcol{ position:absolute; width:260px; margin-left:4px; border: 1px solid #FCDD81;background-color:#FCDD81; height:231px;}
.middlecol{position:absolute; width:513px; border: 1px solid #fcdd81; left:270px;}
</style>
</head>
<body>
<div id="maincontainer">
<div id="toppicbox">
<div class="leftcol">
<p>Pithy quote here</p>
</div><!--leftcol-->
<div class="middlecol">
<img src="img/example.jpg" alt="example" />
</div><!--middlecol-->
<div class="rightcol">this is the right col</div>
</div><!--toppicbox-->
</div><!--maincontainer-->
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>
example
</title>
<style type="text/css">
#maincontainer, #toppicbox{width:100%;}
.leftcol{float:left;width:260px; margin-left:4px; border: 1px solid #FCDD81;background-color:#FCDD81; height:231px;}
.middlecol{float:left;width:513px; border: 1px solid #fcdd81; left:270px;}
.rightcol{margin-left: 780px; margin-right:0; background: #fcdd81 url(../img/example.jpg); height:231px; border:1px solid #fcdd81;}
</style>
</head>
<body>
<div id="maincontainer">
<div id="toppicbox">
<div class="leftcol">
<p>
Pithy quote here
</p>
</div>
<!--leftcol-->
<div class="middlecol">
<img src="img/example.jpg" alt="example" />
</div>
<!--middlecol-->
<div class="rightcol">
this is the right col
</div>
</div>
<!--toppicbox-->
</div>
<!--maincontainer-->
</body>
</html>
I swear to god I tried that before and then for some reason it all blew up and I swore, and stamped about the flat for a few minutes, - and then started trying the absolute positioning thing and ditched my floats, and then started swearing some more.. :-/
i'm going to just take a break, put that insanely simple solution into my page, and try and look at this from a fresh prespective :-)
cheers CMarshall!
Stratus
it's all so clear to me now.!
:-)
cheers again!
Stratus
I always use Ockham's Razor for problems like this.
An old graphics design technique is especially useful for CSS: Start with everything in there, then keep taking elements out until it breaks, then put the last element back in. Then, see if there are any other elements that can be removed.
My sites generally work down to IE5, and many down to NS4. Simplicity is absolutely crucial to good cross-browser support.
