CSS的布局问题

Question

我在CSS中进行布局时遇到了一些问题.这是我正在谈论的代码:小提琴.

1. 该<div id="header">应有的高度,<div id="menubuttons">这是我标记为红色.我一直认为,如果你没有陈述div的高度,它将获得它的孩子的高度.
2. 该<div class="contentLine>粘在<div id="theme">我虽然定义margin-top: 20px;.
3. 右列的余量始终大于左列.我希望两者都与浏览器窗口具有相同的余量.

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

让我一个接一个

1) Your <div id="header"> contains floated elements, you need to clear that, so use overflow: hidden; on parent element i.e #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;
}