CSS: Table to div, somekind

Question

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;
}

Answer 1

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;
}