CSS исправление элемента кроме другого

Question

просто вопрос, который я застрял. я играю с некоторыми html и css, я хотел бы создать страницу с полем содержимого в центре страницы и двумя изображениями стрелок по обе стороны окна содержимого. теперь это не сложно, проблема в том, что я использую позицию: absolute; так что если я изменить размер окна элементы идут гайки ..

мой HTML:

<div id= "left_side"> 
    <a href=""><img id="leftArrow" src="images/lefta.png"/></a> 
</div> 

<div id="right_side"> 
    <a href=""><img id="rightArrow" src="images/righta.png"/></a> 
</div> 

<div id="content"> 
    <p>something</p> 
    <p>more something</p> 
</div> 

и мой CSS выглядит следующим образом:

#left_side { 
    border: black solid 1px; 
    position: absolute; 
    left: 0; 
    width: 10em; 
    text-align: center; 
    margin: 65px; 
    border-radius: 8px 8px 8px 8px; 
    } 

#right_side { 
    border: black solid 1px; 
    position: absolute; 
    right: 0; 
    width: 10em; 
    text-align: center; 
    margin: 65px 210px 0px 0px ; 
    border-radius: 8px 8px 8px 8px; 
    } 

#content { 
    background-color: white; 
    width: 500px; 
    margin: 15px 320px 15px 320px; 
    padding: 30px; 
    border:5px; 
    border-radius: 8px 8px 8px 8px; 
    } 

, что я могу изменить, так что боковые изображения/кнопки относятся к области содержимого в любое время независимо от размера экрана. я думал о том, чтобы вложить их в большую коробку, но это лучшая практика, или я собираюсь идти не на ту фут все вместе. извините за простой вопрос, я новичок в этом, и позиционирование всегда убивает меня.

заранее спасибо

Answer 1

Я обычно использую две оболочки дивы не центрировать что-нибудь в них (не абсолютный стиль). CSS:

.couter 
{ 
    position: relative; 
    left: 50%; 
    float: left; 
} 
.cinner 
{ 
    position: relative; 
    left: -50%; 
} 

И использовать как:

<div class="couter"> 
    <div class="cinner"> 
     <div id= "left_side"> 
      <a href=""><img id="leftArrow" src="images/lefta.png"/></a> 
     </div> 

     <div id="right_side"> 
      <a href=""><img id="rightArrow" src="images/righta.png"/></a> 
     </div> 

     <div id="content"> 
      <p>something</p> 
      <p>more something</p> 
     </div> 
    </div> 
</div> 

Answer 2

Я создал jsfiddle для вас с возможным решением.

http://jsfiddle.net/simonweston/MuTEn/

HTML:

<div id= "left_side"> 
LEFT 
</div> 
<div id="content"> 
    <p>something</p> 
    <p>more something</p> 
</div> 
<div id="right_side"> 
    RIGHT 
</div> 

CSS:

#left_side { 
    border: black solid 1px; 
    float: left; 
    width: 10em; 
    text-align: center; 
    border-radius: 8px 8px 8px 8px; 
    } 

#right_side { 
    border: black solid 1px; 
    float: left; 
    width: 10em; 
    text-align: center; 
    border-radius: 8px 8px 8px 8px; 
    } 

#content { 
    background-color: red; 
    float: left; 
    width: 100px; 
    border:5px; 
    border-radius: 8px 8px 8px 8px; 
    } 

Answer 3

Если вы хотите, чтобы содержание расширяться, когда страница расширяется, это то, как вы могли бы сделать это:

http://jsfiddle.net/VKBTy/

Также , Я бы использовал контейнерную коробку с позицией: relative.

Answer 4

Компоновка, который вам нужно можно привести очень простой способ ..

Я изменил ваш CSS, как

#left_side {float:left;width:100px;padding:10px;} 
#right_side {float:left;width:100px;padding:10px;} 
#content {width:500px;float:left;background:blue;} 
.clear{clear:both;} 

и ваш HTML, как

<div id= "left_side"> 
    <a href=""><img id="leftArrow" src="images/lefta.png"/></a> 
</div> 

<div id="content"> 
    <p>something</p> 
    <p>more something</p> 
</div> 

<div id="right_side"> 
    <a href=""><img id="rightArrow" src="images/righta.png"/></a> 
</div> 

<div class="clear"></div> 

Пожалуйста, используйте этот код, чтобы проверить, правильно ли вы получили свое требование.