CSS 컨테이너가 그리드로 성장하지 않습니까?

Question

저는 컨테이너 배경을 CSS와 같이 정의했습니다.

.container { 
    background:#fff; 
    margin-left:auto; 
    margin-right:auto; 
    position: relative; 
    width:970px; 
    border:1px solid #000; 
    padding:5px 10px; 
} 

문제는 내가있는 jqGrid가 (아래쪽 가장자리 근처에) 용기의 바닥에 넣고 그 처음 그려 때 컨테이너 패널 내부에 맞지 않고 제대로 표시해야합니다. 이런 식으로 뭔가 (내 비 l33t 그래픽하여 skillz 용서하십시오) :

alt text http://img67.yfrog.com/img67/7162/screenshot002f.jpg

하지만 내가 행이 그리드를 채울 때 용기를 빨리 성장하고 정말 볼품 보이는, 이런 일이 (내가 원래 원 컨테이너 배경 가장자리) :

alt text http://img80.yfrog.com/img80/5419/screenshot003fr.jpg

나는 그것 뭔가 내가 CSS 잘못하고있는 중이 야 확신합니다. 어떤 조언을 주시면 감사하겠습니다.

편집 : 문제는 컨테이너의 높이가 지금 채워 그리드의 새로운 높이에 의해 중복되는 폭

Answer 1

내부에 수레가있을 때이 현상이 여러 번 발생하는 것을 보았습니다. 컨테이너를 닫기 직전에 지우기 div를 추가하십시오. 수레 후 항상 청소해야합니다.

<div class="container"> 
    <div id="nav" style="float:left;"> 
    ... 
    </div> 
    <div id="grid" style="float:left;"> 
    ... 
    </div> 
    <div style="clear:both;"></div> <!-- this does the trick --> 
</div> 

나는 adding float to container에 동의하지 않습니다. 이 방법이 효과가 있지만 불필요한 수레가 있으면 더 많은 문제가 발생할 수 있습니다. 플로팅은 필요할 때만 사용하고 플로팅을 완료하면 지울 수 있습니다.

또한 내 경험상 overflow은 height을 정의하지 않는 한 여기에 아무런 의미가 없습니다. 컨테이너에 오버플로를 설정하면 문제가 해결되지 않는다고 생각합니다. 내가 틀렸다면 의견에서 나를 바로 잡아라.

Answer 2

컨테이너는 고정 폭 성장하지 없습니다. 당신이 찾고있는 것은 최소 폭입니다. 즉, 변경 :

width:970px; 

에 :

min-width:970px; 

메모, IE 6 분 - 폭 7 대접 폭으로, 다른 브라우저는하지 않습니다.

Answer 3

나는 당신이 당신의 CSS이 필요하다고 생각 :

overflow: auto; 

Answer 4

.container { overflow:hidden; } 

당신이 수레를 다루고있는 가정이 컨테이너 사실을 포함 할 수있는 하나의 방법입니다.

Answer 5

컨테이너 및 내부 그리드에 대한 플로트 상황에 따라 여러 가지 작업을 수행 할 수 있습니다.

clear:both; 

부모를 떠올리게 할 수도 있습니다. 이것은 float를 고정하기 위해 float를 설정하는 것입니다. 그리드가

float:left; 

가있는 경우 다음 당신은 당신의 용기 CSS에

float:left; 

를 추가 할 수 있도록. 나는 Complex Spiral article on containing floats을 정말 좋아한다.