How to achieve table layout without using tables?
Create a style as:
.footerItem { float: left; }
<div class="footerItem">
<img src="http://www.poltairhomes.com/images/footerlogo.png" />
</div>
<div class="footerItem">
<p>Poltair Homes Plc<br />Registered Office: The Old Chapel, Greenbottom, Truro, Cornwall, TR4 8QP.<br />Registered in England & Wales: 3955425<br />www.poltairhomes.com<br />[email protected]</p>
</div>
<div class="footerItem">
<p>Terms and Conditions | Privacy Policy | Sitemap</p>
</div>
<div class="footerItem">
<p>SIGN UP FOR OUR NEWSLETTER:</p><img src="http://www.poltairhomes.com/images/signup(temp).png" />
</div>
and then create your body using DIVs to separate the blocks and apply the class to each one:
<div class="table">
<div class="row">
<div class="cell twocol">
<span>Content1</span>
</div>
<div class="cell twocol">
<span>Content2</span>
</div>
</div>
<div class="row">
<div class="cell onecol">
<span>Content3</span>
</div>
</div>
</div>
And the CSS
.table {width: 100%; height: 100%;}
.row {width: 100%; min-height: 1px; height: auto; margin: 0;}
.cell {float: left; margin: 0; padding: 0;}
.onecol {width: 100%;}
.twocol {width: 50%;}
I suggest you look into some gridsystems, like 960grid (http://960.gs/) or 1140grid (http://cssgrid.net/), will help you a lot.
CSS:
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
HTML:
<div class="table">
<div class="table-row">
<div class="table-cell">Table cell 1</div>
<div class="table-cell">Table cell 2</div>
</div>
</div>