Nuke to Drupal Theme conversion: define DOM
Now that the sizes, the positions and some extras are known, I can make a DOM out of this:
DOM
<div id="logo">1</div> <div id="header">2</div> <div id="banner">3</div> <div id="wrapper"> <div id="sidebar-left">4</div> <div id="main-content"> <div id="sidebar-right">6</div> 5 </div> </div> <div id="footer">7</div>
CSS
I will not get into the details of the CSS here, only show the results of the layout CSS.
body, #logo, #header, #banner, #wrapper, #main-content, #sidebar-left, #sidebar-right, #footer { padding:0; margin:0; } #logo { background:#f669ff; height : 80px; width : 132px; position : absolute; left : 0px; top : 0px; } #header { background:blue; height : 80px; width : 648px; position : absolute; left : 132px; top : 0px; } #banner { background:yellow; height : 80px; width : auto; position : absolute; left : 10px; top : 80px; right: 0; } #wrapper { position:relative; background:#73ffcd; margin-top : 160px; } #main-content { position:relative; background:yellow; margin-left:132px; margin-right:10px; } #sidebar-left { position:relative; background:green; margin-left : 10px; top : 0; width:122px; float:left; } #sidebar-right { position:relative; background:blue; width:122px; float:right; } #footer { position:relative; background:pink; clear:both; height : 73px; }
mockup
see the result here