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