HTML5/CSS 레이아웃 divs 나란히 나란히

이 레이아웃 문제를 해결할 때 지난 밤 (이른 아침까지) 시간을 소비합니다. 나는 css3 팁과 트릭을 읽었지 만,이 문제를 해결하는 데 도움이되는 것을 찾을 수 없습니다.HTML5/CSS 레이아웃 divs 나란히 나란히

참조 내 바이올린 : http://jsfiddle.net/aWsmb

히프 라인 : 왼쪽에있을 필요가 NAV가, 오른쪽 (고전)에있을 필요가 SUBCONTENT. 어떤 이유로 든 SUBCONTENT는 놀고 좋은 사람이되고 싶지 않습니다. 그것은 NAV 뒤에서 '촬영'하거나 옆에 놓여 지지만 사용 가능한 너비를 모두 사용하지 않고 바닥 글과 겹칩니다. 바이올린을보십시오.

--------------------------------- 
| header      | 
--------------------------------- 
| main nav      | 
--------------------------------- 
| main section     | 
--------------------------------- 
| NAV | SUBCONTENT (full-widh) | 
|  |       | 
--------------------------------- 
| footer      | 
---------------------------------

두 개의 추가 질문 :

<div id='subnav'> = better to ASIDE for this? 
<div id='association'> = better to use ARTICLE here?

출처

2012-03-07 Roger

div 왼쪽에 association div를 플로팅하는 대신, 플로트를 벗기고 사이드 패딩의 크기 + 원하는 패딩을 margin-left 줄 수 있습니다. 예 : http://jsfiddle.net/aWsmb/15/. 그렇게하면 부모 컨테이너로 채울 수 있습니다. 그렇지 않으면 플로트를 사용하는 경우 부모에게 overflow: auto을 사용하여 어린이가 채울 수 있도록하십시오.

그리고 당신이 의미 론적이되고 싶다면, 서브 나브에 사용하십시오. 나는 의미 론적 레이아웃을 갖는 것이 좋지만, 당신이 할 수있는 최악의 상황은 아닙니다 : p

출처

2012-03-07 12:27:03

thx! 이 테이블을 전체 너비 (오렌지색)로 만드는 방법에 대한 생각은 http://jsfiddle.net/aWsmb/18/? – Roger

그냥'width : 100 %'테이블을 제공하십시오 : http://jsfiddle.net/aWsmb/19/ –

그래, 처음에 작동하지 않았다. 하지만 지금은 그렇습니다. 감사! – Roger

이 DIV 대륙을 float:right을주고 적절한 오른쪽 여백을 줄 수

이 내가 찾는 것입니다. 바닥 글이 겹치지 않도록 subcontinent div의 min-height 속성을 제거 할 수도 있습니다.

출처

2012-03-07 12:26:20 Misam

HTML5/CSS 레이아웃 divs 나란히 나란히

답변

관련 문제