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

Question

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

мой 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

Обычно я использую два div-обертки для центрирования чего-либо внутри них (без абсолютного стиля).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

Если вы хотите, чтобы содержимое расширялось при расширении страницы, это можно сделать следующим образом:

http://jsfiddle.net/VKBTy/

Кроме того, я бы использовал контейнер-контейнер с позицией: относительный.

Answer 3

Я создал для вас 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 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>

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