Arghh, my 3 col layout just isn't working. Here's the code so far:
I get the 3 cols, but the content div gets pushed to below the left menu. How can I get the content div to float inbetween the two?
Thanks!
Code:
/* Global styles ------------------------------------------*/
body {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
line-height: 1.5;
color:#003300;
text-align: center;
background-image:url(../images/bodybg.jpg);
background-repeat:repeat-x;
background-color:#003366;
}
/* End of global styles -----------------------------------*/
/* Layout styles -----------------------------------------*/
#container {
position: relative;
width: 750px;
border: 1px solid black;
margin: 0 auto;
padding: 0;
text-align: left;
background-color:#FFFFFF;
}
#header {
border-left: 1px solid black;
border-right: 1px solid black;
padding: 0;
margin: 0;
}
#pathway {
height: 20px;
font-style:italic;
background-color:#000033;
color:#FFFFFF;
padding-left:5px;
padding-right:5px;
}
#leftbox {
float:left;
width:125px;
padding:5px;
background-color:#333399;
color:#99CCFF;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
#rightbox {
float:right;
width:125px;
padding:5px;
background-color:#333399;
color:#99CCFF;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
#contents {
width:500px;
}
li {
padding:0px;
}
Code:
<div id="container">
<div id="header">Header</div>
<div id="pathway">Pathway text</div>
<div id="leftbox">
<ul>
<li>Left menu</li>
<li>dsds</li>
<li>asd</li>
<li>dfsd</li>
<li>fasdf</li>
<li>df</li>
</ul>
</div>
<div id="rightbox">
<ul>
<li>Left menu</li>
<li>dsds</li>
<li>asd</li>
<li>dfsd</li>
<li>fasdf</li>
<li>df</li>
</ul>
</div>
<div id="contents">
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>I get the 3 cols, but the content div gets pushed to below the left menu. How can I get the content div to float inbetween the two?
Thanks!