Menu
I’m building a site where I have my navigation on the right hand side and the main content in the middle. I’ve split it into a 3 column layout firstly to keep the center column in the middle of the screen but for it still to be liquid and secondly because the left column may be used as somewhere for secondary navigation to be, dependent on the type of content.
I’d quite like these columns to span the full height of the window. This is more important for the two side columns. If I give the container div a height in px then the 3 floated divs fill its height. I have tried combinations of height:100% but just can’t get them to span the full height.
This is the basic code: (The backgrounds are just there so I can see what’s going on)
[CODE]body{
padding:0;
margin:0;
font-family:Geneva, Arial, Helvetica, sans-serif;
}
#container{
min-width:900px;
}
#navigation {
float:right;
width:15%;
height:100%;
background:#CCCCCC;
}
#content {
float:right;
width:75%;
height:100%;
background:#999999;
}
#spacer {
float:right;
width:10%;
height:100%;
background:#666666;
}
#navigation ul{
font-size:250%;
list-style:none;
}
[code=html]<body>
<div id=”container”>
<div id=”navigation”>
<ul>
<li>HOME</li>
<li>WORK</li>
<li>PHOTO</li>
<li>ABOUT</li>
</ul>
</div>
<div id=”content”>
Content
</div>
<div id=”spacer”>
Spacer
</div>
</div>
I also want to have a mini footer in the navigation div that will need to be at the bottom of the window all the time in a fixed position style. I assume if I can get the navigation div to have a 100% height then i can just absolute position the mini footer inside it or have I got that totally wrong?
Here’s a little [URL=”http://www.tomforth.com/images/example.jpg”]diagram
Thanks