CSS Fixing An Element Besides Another

just a simple question i am stuck with. i am playing around with some html and css, i would like to create a page with content box in the centre of the page and two images of arrow

Solution 1:

I normally use two wrapper divs to center anything inside them (no absolute style). CSS:

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

And use like:

<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>

Solution 2:

If you want the content to expand when the page expands, this is how you could do that:

http://jsfiddle.net/VKBTy/

Also, I would use a container box with position:relative.

Solution 3:

I have created a jsfiddle for you with a possible solution.

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;
  }

Solution 4:

The layout which you need can be brought in a very simpler way..

I have modified your css as

#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;}

and your HTML as

<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>

Please use this code to check whether you got your requirement right..