CSS 레이아웃 문제

Question

CSS 레이아웃 문제가 있습니다. 다음은 내가 말하는 코드입니다. Fiddle.

1. <div id="header">의 높이는 <div id="menubuttons">이어야합니다. 빨간색으로 표시했습니다. 나는 항상 div의 높이를 명시하지 않으면 자식의 높이를 얻을 것이라고 생각했습니다.
2. <div class="contentLine>은 margin-top: 20px;으로 정의되었지만 <div id="theme">에 붙어 있습니다.
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

날, 당신이 선택을 취소해야합니다 귀하의 <div id="header">가 떴다 요소를 포함) 1

1 일을 이동, 그래서 #header

즉 부모 요소에 overflow: hidden;를 사용하자

2) 다시 #theme을 플로팅했지만 width: 100%;으로 설정 했으므로 필요하지 않습니다. 거기에 떠있다.

3) 마지막에 대해 지금은 1%은 그래서 당신은 당신이 box-sizing: border-box;를 사용하는 것이 좋습니다 싶습니다을 제대로 계산할 필요가있어, 그에 따라 margins를 설정해야하고 각 요소에 대해 33%width을 설정하고 padding-right

을 적용보다

Demo

또한 contentLine 안에 중첩되어 있는지 분명 당신의 부동 요소를 확인합니다.

---

IE 팬이 아닌 경우 아래에서 스 니펫을 사용할 수 있습니다. 그러면 더 좋은 방법으로 상위 요소가 자동으로 지워집니다.

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

Answer 2

업데이트는 HTML

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

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

업데이트이 도움이 될

.clear{ 
clear:both; 
} 

당신의 CSS. - 다시 사용할 수 있습니다.