Layout problems with CSS

Question

I got some problems with layouting in CSS. Here is the code I am talking about: Fiddle .

1. The <div id="header"> should have the height of the <div id="menubuttons"> which I marked red. I always thought that if you don't state the height of a div it will get the height of it's children.
2. The <div class="contentLine> is stuck to the <div id="theme"> although I defined margin-top: 20px; .
3. The right column always has greater margin than the left column. I want both to have the same margin to the browser window.

CSS

body {
    margin: 0 auto;
    padding: 0;
    font-family:'Share', cursive;
}
#header {
    width: 100%;
    vertical-align: middle;
}
#header_logo {
    width:;
    float: left;
    margin: 11px 20px 20px 20px;
    background-color:;
}
#menubuttons {
    margin-right: 0;
    margin-top: 0;
    height: 2.5em;
    line-height: 2.5em;
    display: inline-block;
    background-color: red;
}
#menubuttons ul {
    list-style-type: none;
    margin:0;
    padding:0;
}
#menubuttons li {
    float: left;
    margin-right: 20px;
}
a {
    font-family:'Share', cursive;
}
a:link {
    text-decoration:none;
}
a:visited {
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:active {
    text-decoration:underline;
}
#theme {
    width: 100%;
    height: 400px;
    background-color: green;
    margin-top: 0;
    float: left;
}
.contentLine {
    margin: 0 auto;
    margin-top: 20px;
    width: 96%;
}
.contentLine .column {
    float: left;
    margin: 0;
    width: 30%;
    margin-right: 1%;
    padding: 1%;
    position: inherit;
    /* shadow for seeing div boundaries */
    box-shadow: 0 0 1px black inset;
}
.contentLine #last {
    margin-right: 0;
}

Answer 1

Let me go 1 by 1

1) Your <div id="header"> contains floated elements, you need to clear that, so use overflow: hidden; on parent element ie #header

2) Again, you've floated #theme but you've set it to width: 100%; so you don't need float there.

3) About the last you need to set the margins accordingly, right now it's 1% so you need to calculate this correctly, I would like to suggest you to use box-sizing: border-box; and set 33% width for each element and than apply padding-right

Demo

Also make sure you clear your floating elements which are nested inside contentLine .

---

If you are not one of those IE fans, than you can use the snippet below, which will self clear the parent element in a better way.

.clear:after { /* Much much better than overflow: hidden; */
   content: "";
   display: table;
   clear: both;
}

Answer 2

Update your html

</ul>
<!--Menu ends here -->
    </div>
<!--menubuttons ends here -->

<!--Add following div to your code -->
    <div class="clear"></div>
</div>
<div id="theme">

Update your CSS

.clear{
clear:both;
}

This should help. - will be reusable also.