열 넘치는 주요 div 요소

Question

세 개의 열 (각각 내용에 따라 높이가 다를 수 있음)로 내 홈페이지를 설정하려고 시도하고 있으며 내 '콘텐츠'div의 열이이를 존중하지 않습니다. 이로 인해 열은 아래 정보 위로 오버플로됩니다. 나는 배치를 사용하여 같은 레이아웃을 만들려고 노력했다. 왜냐하면 그 일을하는 더 좋은 방법을 이해하고 있기 때문이다. 그러나 나는 운이 없었다.

필자는 열을 고려한 '오버플로'요소를 사용하려고했지만 내용 요소에 스크롤 막대를 놓습니다.

내 작품은이 작업을 수행 않는 이유는 here

1. 의 예를 참조하십시오? (편집) - 이해

2. 열이 콘텐츠 요소 안에 있고 문서의 흐름을 준수하도록하려면 어떻게해야합니까? (편집) - 해결

3. 어쩌면 위치 지정을 사용하여 더 나은 방법을 조언 해 주시겠습니까? 내가 최선의 방법으로 포지셔닝을 사용하고있는 메소드입니까, 아니면 상대, 정적 등을 사용해야합니까?

Answer 1

1. 내용을 확인하십시오;

2. 3 개의 열을 떠 다니므로 Clearfix과 같은 것을 사용해야 열의 컨테이너 다음에 오는 내용이 지워질 수 있습니다. 또는 <p>에서 바닥 글 내용이 포함 된 clear: both을 설정할 수 있습니다.

3. 부동은 일반적인 방법으로 여러 열을 접근하므로 올바른 방향으로 향하고 있습니다. 위치 지정은 거의 확실하게 여기에서 도움이되지 않습니다.

Answer 2

를 추가해보십시오 오버 플로우 : 콘텐츠 사업부에 숨겨진 아래처럼 높이 제한을 제거 :

#content 
{ 
    background-color:Blue; 

    width:800px; 
overflow:hidden; 

Answer 3

당신은 그 열을 부유하는, 당신은 플로트를 취소하지 않는 그래서 무슨 일이 사건입니다 이 세 div가 다른 모든 것 위에 "떠 다니는"것이므로 브라우저는 기본 HTML에 포함하지 않습니다. CSS clear 값으로 부동을 지워야합니다.

는 jsFiddle가 here

또한이 경우에 overflow: hidden (또는 유사)를 사용하지 않는 한 그 경계 상자를 오버플로이 tutorial