How to position a DIV in relation to another DIV

Question

I illustrated in HERE a situation with a simple layout. I would like that all the elements keep their position when another element is modified. For example, if I change the Title font to more or less, the button2, will move and I don't want that. So is there a way to keep their position fixed even when other elements are modified?

<div id="slides">
            <p class="title">TITLE GOES HERE</p>
            <p class="description">Description goes here</p>
            <div id="button1">BUTTON1</div>
            <div id="button2">BUTTON2</div>
</div> <!-- end slides -->

#slides{
width:600px;
height:280px;
background:yellow;
}
p.title{
font-size:28px;
text-align:center;
position: relative;
top:40px;
}
p.description{
text-align: center;
position:relative;
top:20px;
}
#button1{
width:150px;
height:35px;
background:blue;
margin:0 auto;
line-height:35px;
text-align: center;
position:relative;
top:40px;
}
#button2{
width:85px;
height:25px;
background:red;
margin:0 auto;
line-height:25px;
text-align:center;
position:relative;
top:135px;
}

Check this http://www.barelyfitz.com/screencast/html-training/css/positioning/ to learn everything about positioning — Jose Rui Santos, Jul 14 '14 at 13:18
If you want to learn how CSS positions work, than I've wrote a detailed answer [here](http://stackoverflow.com/a/20718728/1542290) — Mr. Alien, Jul 14 '14 at 13:19

score 1 · Accepted Answer · answered Jul 14 '14 at 13:14

You're looking for elements relatively absolute positioned (or absolute relatively?).

You should set the parent #slides to position: relative and then the child elements should be position: absolute, with this you can set top, right, bottom or right properties in the children relatively to the #slide.

This way the children of #slides won't follow the flow when some other child changes.

http://codepen.io/anon/pen/yhFnb

score 0 · Answer 2 · answered Jul 14 '14 at 14:49

Modify your css like this :

    #slides{
        width:600px;
        height:280px;
        background:yellow;
      position: relative;
    }

  #button2{
    width:85px;  
    height:25px;
    background:red;
    line-height:25px;
    text-align:center;
    position:absolute;
    left: 50%;
    margin-left : -42px;
    bottom : -12px;
   }

Demo http://codepen.io/anon/pen/gAcka

Hope it help.

How to position a DIV in relation to another DIV

2 Answers2