CSS columns....please help

Hi

I am new to css and am trying to use the following code to make a page.

i cant seem to position the content on the right of the left nav. i want it so that the content div resizes and stays in the same position when the browser is resized but the leftnav stays in the same position and doesnt re size....any help would be appreciated.

third.css

body { /*sets properties for the body of the document*/
background-color:#ffffff;
margin:0px 0px 0px 0px;
}
#container {

margin-top: 50px;
margin-left: 50px;
margin-right: 50px;
margin-bottom: 50px;
padding: 0px;
background-color: orange;
width: 80%;
min-width: 181px;
}
#footer {
padding: 0px;
position: relative;
padding: 0px;
background-color: yellow;
width: 100%;
}

#content {
left:200px;
width:100%;
background-color: red;

}

#leftnav { /*sets properties for the left nav bar*/

background-color : #66ccff;

width: 180px;


}

third.html

<div id="container"> container
<div id="leftnav">left nav</div>

<div id="content">content content content content content content content content
content content content content content content content content content content
</div>
<div id="footer">footer</div>
</div>

try this

thanks that seems to work fine

Cheers
Andy

actually when i resize it content sticks out of the end of the container, is there a way to stop this, footer stays the same as container all the time.


i have tried setting content to 100% - #leftnav which seems to work fine but i dont know if this is suitable or not...will it work all the time and in most browsers?

cheers
Andy

not sure what you mean,

in which browser did this occure?

have tested this in mozilla, msie, opera and konqueror looked the a like in all of them.

there shouldn't be any need to specify the width for content as a block-level element it gets width 100% as default,

i have fixed that now but i am having problems with the footer, i want to stick it to the bottom of the container but so it doest go over the left nav when resized .. if you run the code you will see what is happening.

any suggestions would be most apreciated.

css

body { /*sets properties for the body of the document*/
background-color:#ffffff;
margin:0px 0px 0px 0px;
}
#container {
margin-top: 50px;
margin-left: 50px;
margin-right: 50px;
margin-bottom: 50px;
padding: 0px;
background-color: #66ccff;
width: 80%;
min-width: 241px;
height:100% -#footer;
}

#footer {
padding: 0px;
position: relative;
padding: 0px;
background-color: yellow;
width: 100%;
}

#content {
margin-left:180px;
width:100% - #leftnav;
height: *%;
background-color: #66ccff;
align: right;
min-width: 50px;
min-height: 250px;
padding-left: 5px;
/*overflow:hidden; can also be set to visible this causes some silly problems*/
border-left:2px solid;
border-color:#663300;
}

#leftnav { /*sets properties for the left nav bar*/

float:left;
background-color : #66ccff;
width: 180px;
height:100% -#footer;
padding-top:30px;
}


#topleftspace {
position:absolute;
background-color: #66ccff;
width: 180px;
height:20px;
}

#toprightspace {
margin-left:180px;
background-color: #66ccff;
width:100% - #leftnav;
height:20px;
border-left:2px solid;
border-color:#663300;
padding-left:5px;
}

#topleftcorner {
text-align: left;
}

#toprightcorner {
text-align:right;
}

#topleftwhite {
position:absolute;
background-color: #FFFFFF;
width: 180px;
height:30px
}

#toprightwhite {
margin-left:180px;
background-color: #FFFFFF;
width:100% - #leftnav;
height:30px;
border-left:2px solid;
border-color:#663300;
padding-left:5px;
}

html


<div id="container"><div id="topleftwhite"></div><div id="toprightwhite"></div>

<div id="topleftspace"><div id="topleftcorner"><img src="images/t-left-corner.gif" width="20" height="20"</div></div>


<div id="leftnav"><img src="images/home-menu.gif" width="179" height="251"> left left left left left left left leftleft leftleft leftleft leftleft leftleft leftleft leftleft leftleft leftleft leftleft leftleft leftleft leftleft leftleft left</div>

<div id="toprightspace"><div id="toprightcorner"><img src="images/t-right-corner.gif" width="20" height="20"</div></div>
<div id="content"> content content content contentcontent contentcontent contentcontent contentcontent content
content contentcontent contentcontent contentcontent content
content contentcontent contentcontent content iam the man!Q!!!!!!! content content content contentcontent contentcontent contentcontent contentcontent content
content contentcontent contentcontent contentcontent content
content contentcontent contentcontent content iam the man!Q!!!!!!! content content content contentcontent contentcontent contentcontent contentcontent content
content contentcontent contentcontent contentcontent content
content contentcontent contentcontent content iam the man!</div>

<div id="footer"> temp</div>