How to create html page layout using DIVs - html

Question

I've spend so many hours trying to figure out how to create html layout in the following format with no luck. Can someone guide me in the right direction? Thanks
-----------------------------------------------------------------
| headerDiv1 | hDiv2 &nbsp|
-----------------------------------------------------------------
| contentDiv1 | cDiv2 &nbsp|
| |
|
| |
&nbsp|
--------------------------------------------------------------
| footerDiv1 | fDiv2 &nbsp|
--------------------------------------------------------------

Answer 1

Start by using a grid system, like http://twitter.github.io/bootstrap/scaffolding.html#gridSystem or many other you around.
It would be much easier to design a layout.

Answer 2

This can also be accomplished pretty easy in just HTML & CSS. YOu can see a working example here - Grid Layout.
Twitter Bootstrap is of course another good option, if you're willing to use an external library. It gives you some other really nice features (such as icons, etc).
If you're doing something basic, I'd probably just go with the CSS & not have to worry about the external library. It'd be worth learning Bootstrap if you have larger projects, or plan on doing things like this often in the future.
HTML
<div id="columns">
<div class="col1">
<div id="headerDiv1">
<p>header div</p>
</div>
<div id="contentDiv1">
<p>content div</p>
</div>
<div id="footerDiv1">
<p>footer div</p>
</div>
</div>
<div class="col2">
<div id="hDiv2">
<p>header div right side</p>
</div>
<div id="cDiv2">
<p>content div right side</p>
</div>
<div id="fDiv2">
<p>footer div right side</p>
</div>
</div>
</div>
CSS
#columns{
display: table;
width: 500px;
}
.col1{
display: table-cell;
width: 80%;
padding: 1em;
position: relative;
left: auto;
}
.col2{
width: 20%;
display: table-cell;
padding: 1em;
position: relative;
}