CSS: Table to div, somekind

Problem

enter image description here

This is what i want… But how can i build this using CSS and DIV’s? I tried many tutorials, but it didn’t came further than this:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background: #F0F0F0;
}

#wrapper {
padding: 1px;
margin: 0 auto;
}

#wrapper:after {
content: ".";
display: block;
clear: both;
height: 0;
overflow: hidden;
}

#left {
float: left;
width: 200px;
background: white;
padding: 5px;

}

#content {
margin-left: 215px;
background: white;
padding: 5px;
padding-left: 10px;
}

Problem courtesy of: Thew

Solution

Here’s a little demo: http://jsfiddle.net/32trY/56/.

I went a bit overkill with the <div class="wrap">, so sorry about that.

HTML:

<div id="header">
<div id="smallbox">Tiny Box</div>
<div id="headerMain">Header Part</div>
</div>


<div id="content">
<div id="contentLeft">
<div class="wrap">
Left Thing
</div>
</div>

<div id="contentMain">
<div class="wrap">
The Content
</div>
</div>
</div>

CSS:

html, body {
height: 100%;
padding: 0px;
margin: 0px;
}

#header {
height: 100px;
width: 100%;
position: absolute;
}

#header #smallbox {
float: left;
background-color: rgb(255, 180, 180);

width: 100px;
height: 100%;
}

#header #headerMain {
background-color: rgb(255, 200, 200);
height: 100%;
}

#content {
height: 100%;
}

#content #contentLeft {
float: left;
background-color: rgb(180, 180, 255);

width: 100px;
height: 100%;
}

#content #contentMain {
background-color: rgb(200, 200, 255);
height: 100%;
}

.wrap {
padding-top: 100px;
}

Solution courtesy of: Blender

View additional discussion.