There are several ways to solve this. In any case you should move the <div id="sidebar"></div> inside the <div id="page"></div>
Since this is a layout problem you mainly need to be looking at the CSS in the style.css file. In theory it doesn’t matter in what order the (X)HTML is. You can position everything where you want it with CSS.
That being said there are easy ways to do things and complicated ways.
Here are the two most commonly practiced techniques to get the sidebar beside the content.
1st technique:
XHTML:
<div id="page">
<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
CSS:
#page {
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#content {
float: left;
width: 600px;
margin: 0px;
}
#sidebar {
margin: 0px;
width: 200px;
}
#footer {
clear: both;
}
2nd technique:
XHTML:
<div id="page">
<div id="header"></div>
<div id="sidebar"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
CSS:
#page {
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#content {
width: 600px;
margin: 0px;
}
#sidebar {
float: right;
margin: 0px;
width: 200px;
}
#footer {
clear: both;
}
There’s an ongoing debate which technique is the better of the two. It all depends on who you talk to. I personally prefer the first one.
If you want the header and footer to be the same width of your content instead of the whole width of the page, all you have to do is set the same width in the CSS on the #header and #footer .
