2 div의 100 % 너비 만드는 법

Question

나는 오른쪽 페이지

<div id="main"></div> 
<div id="panel"></div> 

왼쪽에서 주요하게 플로트를 사용하고 패널에 2 사업부를

#photos-main { 
float: left; 
width: 800px; 
position: relative; 
} 

#panel { 
float: left; 
margin-left: 830px; 
position: absolute; 
} 

내가 패널이 왼쪽 페이지 공간, CSS를해야 채울 수 있도록하려면 나는 사용한다?

Answer 1

그냥 부 풀지 말고 상대적으로 배치하십시오. 여백도 가져 가라. 떠 다니는 "main"은 단순히 "panel"의 왼쪽에있을 것임을 의미합니다. "main"을 정의하면 원하는대로 "panel"이 자동으로 나머지 공간을 차지합니다.

#photos-main { 
float: left; 
width: 800px; 
position: relative; 
} 

#panel { 
} 

Answer 2

레이아웃을 만드는 것처럼 보이십니까? 그런 경우, 다음 링크에서 제시 한 기술의 일부 (따라서 학습) 구현하는 것이 좋습니다 :

40 Tutorials and tips about CSS Layouts

CSS Positioning

The perfect three columns layout

는 희망이 도움이!

Answer 3

이 접근 부동 그것을 할 수 :

#photos-main { 
float: left; 
width: 800px; 
} 

#panel { 
float: right; /*to have the panel on the right side*/ 
width: 100px; /*with a width of 100px*/ 
} 

는 그런 다음 두 요소의 전체 폭을 얻을 서로 두 개의 태그를 포장해야합니다.

이 두 열 레이아웃을 명확히하고 예를 들어. 바닥 글 밑에 HTML 구조에 다른 것을 넣고 CSS에 "clear : both;"를 설정하면 플로팅이 중단됩니다.

전체 샘플

HTML

<div id="wrap"> 
    <div id="photos-main"></div> 
    <div id="panel"></div> 
    <div id="clear"></div> 
</div> 

CSS

#wrap { 
width: 900px; 
} 

#photos-main { 
float: left; 
width: 800px; 
} 

#panel { 
float: right; /*to have the panel on the right side*/ 
width: 100px; /*with a width of 100px*/ 
} 

#clear { 
clear:both; 
}