엘리먼트가 브라우저의 크기에 맞지 않고 움직입니다. 도움이되지 않습니다

내 브라우저 (크롬)에서 최대화되었습니다. 원하는대로 정확하게 나타납니다. 브라우저의 크기를 조정하자마자 탐색과 로고가 움직이지 않고 겹치고 서로 쌓입니다 ... 지금은 며칠 동안 연구를 해본 결과 무리가 있습니다. 모든 요소를 %로 배치하고 컨테이너 div에 최소 너비를 할당하는 것과 을 지정하지 않는 것 등이 도움이됩니다. 나는 분명히 뭔가를 놓친다. pleeeeeeeease help, 나는 크레이 갈거야! 추신. 로고는 왼쪽 & 오른쪽 사이에 앉도록 배치됩니다.엘리먼트가 브라우저의 크기에 맞지 않고 움직입니다. 도움이되지 않습니다

<body> 
<div id="index_container"> 

<a href="#"><img id="logo" alt="Logo" title="Home" src="#"/></a> 

<div id="top_wrap"> 
    <nav class="left"> 
     <a href="#" title="About" alt="About Us">about Us</a> 
     <a href="#" title="Menu" alt="Menu">menu</a> 
    </nav> 


    <nav class="right"> 
     <a href="#" title="Catering" alt="Catering">catering</a> 
     <a href="#" title="Find Us" alt="Find Us">find us</a> 
    </nav> 
</div> 
</body>

그리고 내 CSS, 그것은 현재 앉아 :

#index_container{ 
min-width:980px; /* !?!?!??!?!?!?!?!??!?!?!??!?!*/ 

} 

#top_wrap{ 
position: absolute; 
top: 0; 
left: 0; 
height: 20%; 
width: 100%; 
background: #333; 
opacity: 0.8; 

} 

.left{ 
position: absolute; 
left: 18%; 
top: 50%; 

    } 

.left a{ 
color:white; 
font-size: 28px; 
text-decoration: none; 
font-family: 'Gafata', sans-serif; 
padding: 36px; 
} 

.right{ 
position: absolute; 
left: 56%; 
top:50%; 

} 

.right a{ 
color:white; 
font-size: 30px; 
text-decoration: none; 
font-family: Gafata, sans-serif; 
padding: 36px; 
font-weight: 400; 
} 

.right a:hover{ 
color: #333; 
background-color: white; 

} 

.left a:hover{ 
color: #333; 
background-color: white; 

} 

#logo{ 
position: absolute; 
left:37%; 
top:-9%; 
height: 310px; 
width: 320px; 
z-index: 1; 
}

JSFIDDLE : http://jsfiddle.net/ZaEG2/

출처

2014-02-23 user3344239

덧붙여서

고마워, 지금 변경해주세요. – user3344239

각 요소마다 'position : absolute'를 사용하여 모든 것을 "고정"하려고 할 때 얻을 수 있습니다. 절대 위치를 과도하게 사용하지 않고 유체 레이아웃을 만드는 방법에 대한 연구를하십시오. – CBroe