CODEWITHSUNDEEP
csscss-position
Andrei Rosu
Andrei Rosu

Reputation: 1387

How to position a DIV in relation to another DIV

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

Upvotes: 0

Views: 899

Answers (2)

Fredy
Fredy

Reputation: 2910

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.

Upvotes: 0

Luizgrs
Luizgrs

Reputation: 4873

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

Upvotes: 1

Related Questions