CSS - PITA

[Hightower]

Can anybody help me? First I'll give my code and then explain what i want to acieve.

 

PHP

 

   


   
Navi here
   
       Banner goes here
       
Content here
   
   

CSS

 

body{
   background-color:#000000;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
}

#wrapper{
   margin:0px auto;
   width:754px;
   height:97%;
   padding:7px;
   background-color:#FFFFFF;
}

#leftnavigation{
   height:100%;
   background-color:#FFCC33;
   width:144px;
   margin-right:17px;
   float:left;
   text-align:center;
   padding-left:3px;
   padding-right:3px;
}

#contentarea{
   float:left;
   width:587px;
   height:100%;
}

Right - I want the page to expand as needed when more content is displayed, but I want the left navigation to expand with it.

 

How easy is this? Tried other forums and things but couldn't get my head around the answers.

 

Any help appreciated thanks,

[stratisphere]

Put the content div inside the navigation div. Then give the content div a left (or right) margin of the navigation's width.

 

If you want some code, lemme know.

[Hightower]

Please - just has a play and can't it it right. Any code would be great!

[stratisphere]

Think this is what ya want...

Untitled Document





   

links...
     
       oink1
       oink2
       doink1
       doink2
     
  
     
this is a content bit...

did you know that? I wonder if this works... yes it does!

dfg

df

f

dfs

dfsg

dfsg

 

style.css

#content {
border: 1px solid #000000;
margin-left: 150px;
height: 100%;
}
#navigation {
width: 150px;
border: 1px solid #FF0000;
height: 100%;
float: left;
}
#wrapper {
height: 97%;
border: 1px solid #0000FF;
}
body {
height: 100%;
}

[Hightower]

Brilliant - thanks!

 

Just gotta figure how to get the footer to stay on the bottom now!

[webman]

For the footer, try clear:both;.

[stratisphere]

was just going to suggest that. To make it stay on the very footer, put it outside the wrapper and do bottom: 0px; in the css. For that to have effect you will have to set the Position one aswell, options are: relative, absolute & static, each give slightly different looks so have an experiment with it.

[Hightower]

For the footer, try clear:both;.

 

I want the footer to remain in the content div though - so the left menu goes all the way down still and the footer starts to the right of it at the bottom of the page.

[Hightower]

Got it working - thanks!