#mixed layout

HTML

<div id="header">HEADER</div> <div id="content"> <div id="main">MAIN</div> <div id="sidebar">SIDEBAR</div> </div> <div id="footer">FOOTER</div>

CSS

#header { background: #ccc; height: 40px; } #content { float: left; margin-right: -100%; width: 100%; } #main { width: 100%; float: left; margin-right: 220px; background: #ddd; } #sidebar { float: right; margin-left: -100%; width: 220px; background: #aaa; } #footer { clear: both; background: #ccc; height: 40px; }

Forrás