you just need to:
use
float:left
for your sidebar and content. this makes them go to the left side of the line. you should use this when you need two (or more) elements side by side. read this for a description on how float works.move sidebar element to before content.
also use
display:inline-block
for your sidebar and content. so they can have width and height.add an element with
clear:both
after them. this clears float on both sides, and allows next elements not to have float.please note that
border-width
is not counted as elementwidth
, and your content no longer needs amargin-right
value.
=================================
<html>
<head>
<style>
@charset "utf-8";
/* CSS Document */
#header {
height: 250px;
width: 728px;
border: dashed #000;
text-align:center;
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
font-size:12px;
}
#footer {
height: 28px;
width: 728px;
border: dashed #000;
text-align:center;
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
font-size:12px;
}
#left-nav {
float:left;
display:inline-block;
height: 500px;
width: 150px;
border: dashed #000;
text-align: center;
font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
font-size: 14px;
position: relative;
}
#content-box {
float:left;
display:inline-block;
height: 500px;
width: 572px;
border: dashed #000;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
#clear{
clear:both;
}
#container{
display:inline-block;
}
body{
text-align:center;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
this is the header
</div>
<div id="left-nav">
<ul id="left-nav-links">
<li> <a href="#"> Link Item #1 </a></li>
<li> <a href="#"> Link Item #2 </a></li>
<li> <a href="#"> Link Item #3 </a></li>
<li> <a href="#"> Link Item #4 </a></li>
<li> <a href="#"> Link Item #5 </a></li>
</ul>
</div>
<div id="content-box">
</div>
<div id=clear></div>
<div id="footer">
this is the footer
</div>
</div>
</body>
</html>