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
Woodcut from Doré. Purely illustrative
Doré Woodcut. Its only function is to make the layout look better. And these images are really nice themselves

About the author: Bèr Kessels is an experienced webdeveloper with a great passion for technology and Open Source. A golden combination to implement that technology in a good and efficient way. Follow @berkes on Mastodon. Or read more about Bèr.