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:

<divclass="couter"><divclass="cinner"><divid= "left_side"><ahref=""><imgid="leftArrow"src="images/lefta.png"/></a></div><divid="right_side"><ahref=""><imgid="rightArrow"src="images/righta.png"/></a></div><divid="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:

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

CSS:

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

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

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

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

<divid= "left_side"><ahref=""><imgid="leftArrow"src="images/lefta.png"/></a></div><divid="content"><p>something</p><p>more something</p></div><divid="right_side"><ahref=""><imgid="rightArrow"src="images/righta.png"/></a></div><divclass="clear"></div>

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