화면 넓이에 맞게 3 div를 설정하는 방법

Question

안녕하세요. HTML에서 내 div의 문제가 있습니다. 크롬에서 올바르게 설정했지만 파이어 폭스 나 IE를 사용할 때 마지막 줄은 다음 줄에 있습니다.

body 
{ 
height: 100%; 
margin: 0; 
padding: 0 ; 
border: 0 none; 
} 
#left 
{ 
background-color:#EEEEEE; 
height:570px; 
width:73.9%; 
float:left; 
} 
#menu 
{ 
background-color:#D4EAE4; 
color:#535353; 
height:570px; 
width:15.25%; 
float:left; 
margin:0; 
} 
#vis 
{ 
background-color:#D4EAE4; 
float:left; 
width:11%; 
height:570px; 
margin:0; 
} 
#container 
{ 
width:98%; 
padding-left:1%; 
padding-right:1%; 
} 
#header 
{ 
background-color:#4671D5; 
-moz-border-radius-topleft: 100px 50px; 
    border-top-left-radius: 100px 50px; 
    -moz-border-radius-topright: 100px 50px; 
    border-top-right-radius: 100px 50px; 
} 

가 어떻게이 사업부의 너무 다른 브라우저에서 완벽하게 서로에 맞게 만들 수 있습니다

:

<div id="container"> 
    <div id="header"></div> 
    <div id="left"></div> 
    <div id="menu"></div> 
    <div id="vis"></div> 
    <div id="footer"></div> 
<div> 

그리고 그들의 CSS : 여기

내 코드? Chrome은 내가 필요한 것입니다. Safari는 vis과 menu2px 사이의 간격을 제공하고 IE와 Firefox는 내 마지막 div을 새 행에 넣습니다. 머리글과 바닥 글은 괜찮습니다. 난 그냥 당신이 당신의 PC에서 그것을 테스트 할 수 있도록 넣어. 그리고 나는 이것을 모든 결의안에 사용할 수 있기를 원하면서 %을 갖고 싶습니다.

Answer 1

변경 메뉴 CSS

#menu 
{ 
background-color:#D4EAE4; 
color:#535353; 
height:570px; 
width:15.1%;//previos 15.25% 
float:left; 
margin:0; 
} 

에 72 %에 왼쪽 DIV의 크기를 감소 시도 각 브라우저에서 동일합니다. 정의되지 않은 경우 브라우저는 기본값을 사용하며 다양한 브라우저에서 다양한 값을 가질 수 있으므로 정확한 너비 계산이 실패 할 수 있습니다.

Answer 2

3 개의 div의 백분율이 100 %를 약간 상회하여 문제가 될 수 있습니다. 난 당신이 또한 div#container에 대한 margin (예 margin: 0;)이 일을 정의해야한다고 생각 데모를 http://jsfiddle.net/J5fVj/2/

Answer 3

작업

Answer 4

솔루션은 여기에 있습니다 : div의 사이에서 http://jsfiddle.net/J5fVj/

• 더 이상 포장
• 더 이상 공간이

는 HTML : (테스트를위한 샘플 텍스트로)

<div id="container"> 
    <div id="header">header</div> 
    <div id="left">left</div> 
    <div id="menu">menu</div> 
    <div id="vis">vis</div> 
    <div id="footer"></div> 
<div>​ 

는 업데이트] 스타일리쉬 :

body 
{ 
height: 100%; 
margin: 0; 
padding: 0 ; 
border: 0 none; 
} 
#left 
{ 
background-color:#EEEEEE; 
height:570px; 
width:73.9%; 
display: inline-block; 
} 
#menu 
{ 
background-color:#D4EAE4; 
color:#535353; 
height:570px; 
width:15.25%; 
display: inline-block; 
margin:0; 
} 
#vis 
{ 
background-color:#D4EAE4; 
display: inline-block; 
width:11%; 
height:570px; 
margin:0; 
    border-left: 1px solid #d0d0d0; 
} 
#container 
{ 
width:98%; 
padding-left:1%; 
padding-right:1%; 
white-space: nowrap; 
font-size: 0; 
} 
#header 
{ 
background-color:#4671D5; 
-moz-border-radius-topleft: 100px 50px; 
    border-top-left-radius: 100px 50px; 
    -moz-border-radius-topright: 100px 50px; 
    border-top-right-radius: 100px 50px; 
} 

#header, #left, #menu, #vis { font-size: 20px; text-align: center; } 

-

공백 : 파라미터 nowrap, 글꼴 크기 : 0, 디스플레이 : 인라인 블록 트릭을했다.