Div, CSS 내에 Div를 센터에 넣으십시오.

Question

여기에 뭔가가 빠졌을 것입니다 ... 그래서 최대한 내 질문에 어리석게되었습니다. (저는 CSS를 올바르게 사용하는 초보자입니다).

명확히하기 위해 내가 성취하려는 것을 보여주는 그래픽을 만들었지 만, 제대로 만들지 못하고 하루 종일 노력하고 있습니다. 나는 100 % 와이드 헤더 div, 중간에 내용, 100 % 와이드 바닥 글 div가 필요합니다. 내 꼬리말 div가 내 콘텐츠 영역을 계속 올라갑니다. CANT가 알아 냈어.

<div id="HEADER"></div> 
<div id="CONTENT"> 
    <div id="contentwrap"> 
     <div id="top-left-photo"></div> 
     <div id="top-right-date"></div> 
    </div> 
</div> 
<div id="FOOTER"></div> 

은 또한 바이올린 포함 시켰습니다 : http://jsfiddle.net/b9kah2wx/

가 감사를!

Answer 1

를 언급하는 것이 중요합니다 http://jsfiddle.net/b9kah2wx/2/

#HEADER { 
    height:300; 
    width: 100%; 
} 
#CONTENT { 
    background-color: #C0F; 
    height:auto; 
    width: 100%; 
} 
#FOOTER { 
    background-color: #C00; 
    height:500px; 
    width: 100%; 
} 
#contentwrap { 
    width: 66%; 
    height: auto; 
    margin: 0 auto; 
    background-color:#0ff; 
} 
#top-left-photo { 
    float:left; 
    height: 180px; 
    width: 40%; 
    margin-right: 15px; 
    background-color: #555555; 
    font-family:"Dirty"; 
} 
#top-right-date { 
    float:left; 
    height: 180px; 
    width: 40%; 
    margin-right: 0px; 
    background-color: #555555; 
} 

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
    } 
.clearfix { display: inline-block; } 
/* start commented backslash hack \*/ 
* html .clearfix { height: 1%; } 
.clearfix { display: block; } 
/* close commented backslash hack */ 

고정 너비를 백분율로 변경 했으므로 jsfiddle에서 작업 할 수 있지만 기본적인 아이디어가 있습니다.

float: ed 요소를 지워야 만 상위 div#contentwrap 높이 문제가 해결됩니다. 이 코드를 추가했습니다.

는이 당신의 HTML

당신은 또한 당신의 수레에 선택을 취소해야합니다

<div id="HEADER"><h1>header</h1></div> 
<div id="CONTENT"> 
    <div id="contentwrap"> 
     <div id="top-left-photo">photo</div> 
     <div id="top-right-date"> date</div> 
     <div class="clearfix"></div> 
    </div> 
</div> 
<div id="FOOTER"></div> 

Answer 2

은이 작업을 수행 : CSS 파일에

* { 
margin: 0 auto; /* Centers everything with a given with except when floated or altered with margin and position properties */ 
} 

참고 아래의 코드를 추가합니다 : 그것은 Paulie_D 같이 분명히 당신의 수레가 나는 당신의 jsfiddle 일부 변경 한