내 CSS 중첩에 문제가 있습니까

Question

기본적으로 저는 현재까지 모든 작업이 정상적으로 진행되었지만 다른 사람들과 협력중인 메신저 및 지난 밤에 파일이 편집되어 내 Subversion을 업데이트 할 때 모양이 조금 변형되었습니다. 기본적으로 나는 더 이상 중첩되지 않는 내 중첩 된 div에 무슨 일이 있었는지 알아낼 필요가있다. 그래서 나는 하루 종일 아무런 기쁨없이 그것을 고치려고 노력했다. 그래서 누군가가 나에게 무슨 일이 일어나고 있는지 말해 줄 수 있기를 바란다.

<div id="navbar"> 

    <!--<div id="notification-icon"> 

    </div><!--End of notification icon--> 

    <!--<ul id="nav-icons"> 

      <li><a href="#" class="notifyMe"></a></li> 

      <li><a href="ProfileFeed.php"><img src="images/home-icon.png" alt="Home" /></a></li> 

      </ul><!--End of navigation icons--> 

      <div id=searchBar><!--start of search bar div--> 
        <input type="text" name="inputString" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" placeholder="Search People"/> 
        <div class="suggestionBox" id="suggestionBox" > 
         <!-- <img src="images/upArrow.png" style="position:relative; top:-12px; left:30px;" align="left"/> --> 
         <div align="left" class="suggestionList" id="autoSuggestionsList"></div> 
        </div> <!--end of suggestionBox--> 

      </div><!--end of search bar--> 

      </div><!--End of navbar--> 

     </div><!--end of topbar--> 

<div id="prof-wrapper"> 

    <div class="prof-content-main"> 





<div id="left_col"> 

</div><!--end of left-col--> 


<div id="right_col"> 

</div><!--end of right-col--> 

</div><!--End of content-main--> 

</div><!--End of Wrapper--> 



<script type="text/javascript" src="js/jquery.transit.min.js"></script> 
    <script type="text/javascript" src="js/jquery.gridrotator.js"></script> 
    <script type="text/javascript"> 
     $(function() { 

      $('#ri-grid').gridrotator({ 
       rows : 2, 
       columns : 3, 
       w1024   : { 
        rows : 3, 
        columns : 3 
       }, 
       w320 : { 
        rows : 2, 
        columns : 3 
       }, 
       w240 : { 
        rows : 2, 
        columns : 3 
       } 
      }); 

     }); 
    </script> 

게시 내 CSS를 포맷하지만 필자는이 바이올린에서 일어나는 뭐죠의 매우 버전을 박탈를 부착하는 방법 임 너무 확실하지 : http://jsfiddle.net/DannyW86/ZMScG/

어떤 이유에서든 내 래퍼가 두 개의 열을 감싸고 있지 않다는 것을 알 수 있습니다. 필자는 ive가 그냥 위에 앉아서 조금 겹쳐서 만들었다는 것을 알 수 있습니다! 정말로이 점에서 나를 자극해라!!

Answer 1

그것은 부동의 단지 문제, 당신은이 개 방법이 어느 수레

Demo

<div style="clear: both;"></div> 

을 취소 또는 #prof-wrapper

Overflow Demo

Answer 2

에 overflow: hidden;을 추가 할 HTML이를 추가 할 수 있습니다

문제는 left_col 및 right_col div가 플로팅 된 것입니다. 포함 div가 높이로 확장되는 것을 맨 위에 표시합니다.

어느 분명로 떠 요소 후 빈 DIV를 사용 : 모두

<div style="clear: both;"></div> 

정도 빈 사업부를 필요로하지 않는 CSS clearfix 솔루션이 더 올바른 형식의 마크 업입니다.

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
} 

이 솔루션을 사용하면 포함/포장 div에 clearfix 클래스를 추가 할 수 있습니다.