부모 div 내에서 DIV를 플로팅 할 수 없습니다

Question

2 개의 DIV 요소가 있습니다 (아래의 "모듈"이라는 레이블이 붙은 요소가 올바르게 작동하지 않습니다! 내가 플로트를 시도 할 때 나란히 표시됩니다. ?. 누군가가 도움이 될 수 있습니다, 나는이 알아낼 수 없었던 한 부모 컨테이너의 외부 이동과 아래로 떨어지는

jsfiddle : jsfiddle

HTML

<div id="contentwrap"> 
     <div id="content"> 
      <div> 
       <span style="text-align:center;"> 
        <h2>Application Title</h2> 
       </span> 
      </div> 
      <br/> 
      <br/> 
      <div class="module"> 
       <a class="modlink" href=" ../csc/index.php"> 
        <img class="modimg" src="./images/csc.png" alt="csc"/> 
        <br/>Client Support Center 
       </a> 
       <br/> 
      </div> 
      <div class="module"> 
       <a class="modlink" href=" ../icm/index.php"> 
        <img class="modimg" src="./images/icm.png" alt="icm"/> 
        <br/>Inventory Control Management 
       </a> 
       <br/> 
      </div>     
     </div> 
    </div> 

CSS

body { 
     font-family: Verdana, Arial, Helvetica, sans-serif; 
     font-size: 13px; 
     color:#E1E6FA; 
     background-color:#183152; 
    } 

    p { 
     padding: 10px; 
    } 

    h1 { 
     font-size: 2em; 
    } 
    h2 { 
     font-size: 1.5em; 
    } 
    h3 { 
     margin-bttom:2px; 
    } 

    #wrapper { 
     margin: 0 auto; 
     width: 1000px; 
    } 

    #headerwrap { 
     width: 1000px; 
     float: left; 
     margin: 0 auto; 
    } 

    #header { 
     height: 100px; 
     background: #375D81; 
     border-radius: 10px; 
     border: 1px solid #C4D7ED; 
     margin: 5px; 
    } 

    #contentwrap { 
     width: 820px; 
     float: left; 
     margin: 0 auto; 
    } 

    #content { 
     background: #ABC8E2; 
     border-radius: 10px; 
     border: 1px solid #C4D7ED; 
     margin: 5px; 
     color:black; 
    } 


    #companylabel { 
     margin: 10px; 
     top:50%; 
     position:absolute; 
     margin-top:-.5em; 
    } 

    #loginbox 
    { 
     width:100%; 

    } 

    #loginboxbot 
    { 
     width:100%; 

    } 

    .ra 
    { 
     text-align:right; 
    } 

    #borderresults { 
     color:orangered; 
     font-weight:bold; 
     padding:0px; 
     margin:0px; 
     border-radius:10px; 
    } 

    #alert { 
     background-color:yellow; 
    } 

    .module { 
     text-align:center; 
     width:120px; 
     padding:5px; 
     border-radius:5px; 
     border: 1px solid #E1E6FA; 
     color:#E1E6FA; 
     background-color:#375D81; 
     float:left; 
    } 

    .modimg { 
     height:100px; 
     width:100px; 
    } 

    .modlink { 
     color:#E1E6FA; 
     text-decoration:none; 
    } 

Answer 1

가장 멋진 수정은 아니지만 <br style="clear:both">을 에 두 번째 .module 아래에 추가 했으므로 의미 론적 마크 업을 위반하는 것으로 보입니다.

http://jsfiddle.net/FAPCW/1/

이것은 일반적인 문제이며, 일반적으로 "clearfix"로 고정됩니다.

많은 버전이 있습니다. 여기에 일반적인 문제에 대한 좀 더 세부 사항 하나 : 여기 http://perishablepress.com/lessons-learned-concerning-the-clearfix-css-hack/

이있어 더 많은 정보를 원하시면 : heres는 https://stackoverflow.com/a/10184992/363701

하나 내가 사용

.cf:before, .cf:after { content: " "; display: table; } 
.cf:after { clear: both; } 
.cf { *zoom: 1; } 

당신은 그냥 당신의 용기에 cf 클래스를 둘 것

및 떠 다니는 아이들은 적절하게 정리 될 것입니다.

Answer 2

일반적인 초보자 용품! 'float'div 끝에있는 두 스타일을 모두 지우는 div를 사용하십시오.

  <div class="module"> 
      <a class="modlink" href=" ../csc/index.php"> 
       <img class="modimg" src="./images/csc.png" alt="csc"/> 
       <br/>Client Support Center 
      </a> 
      <br/> 
     </div> 
     <div class="module"> 
      <a class="modlink" href=" ../icm/index.php"> 
       <img class="modimg" src="./images/icm.png" alt="icm"/> 
       <br/>Inventory Control Management 
      </a> 
      <br/> 
     </div> 
     *<div style="clear:both"></div>*  
    </div> 
</div> 

Answer 3

그것은 당신이해야 할 모든 콘텐츠 사업부의 추가 오버 플로우에 매우 쉽게 : 자동 내가 여기 당신을 위해 그것을했고, 그것을 작동합니다.

http://jsfiddle.net/alaingoldman/FAPCW/5/

#content { 
... 
overflow:auto; 
} 

즐길 +1 나 :