CODEWITHSUNDEEP
htmlcssposition
legendary_rob
legendary_rob

Reputation: 13012

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 arrows on either side of the content box. now thats not hard at all, the issue is i am using position: absolute; so if i change the window size the elements go nuts..

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

and my css looks like this:

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

what can i change so that the side images/buttons are relative to the content box at all times no matter what the screen size. i was thinking of nesting them in a bigger box but is that the best practice or am i going off on the wrong foot all together. sorry for the simple question, i am new to this and positioning always kills me.

thanks in advance

Upvotes: 1

Views: 246

Answers (4)

westo
westo

Reputation: 575

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

Upvotes: 1

creativejey
creativejey

Reputation: 36

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

Upvotes: 0

jchavannes
jchavannes

Reputation: 2710

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.

Upvotes: 1

mshsayem
mshsayem

Reputation: 18018

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>

Upvotes: 2

Related Questions