CODEWITHSUNDEEP
csspositioncss-position
kurro
kurro

Reputation: 85

CSS relative absolute position

I just have a container div-element that contains two div-elements that should appear at the same level on both sides of the container-div. The following solution does not work:

<div id="result" >
    <div class="right">Update</div>
    <div class="left">delete</div>
</div>

stylesheet follows:

div.left{
position:absolute;
left: 5px;
top:0px;
color: green;
border-style:solid;
border-color: green;
}
div.right{
position:absolute;
right: 2px;
top:0px;
color: red;
border-style:solid;
border-color: red;
}
#result{
position:relative;
width:100%;
border-style:solid;
border-color: blue;
}

The blue margin from the container-div does not contains the the other two divs and appears on top of the other two containers.

What am I missing? Thanks!

Upvotes: 1

Views: 157

Answers (4)

pathak tejpal
pathak tejpal

Reputation: 837

you have put position which is not needed basically. see below answer

html here

<div id="result" >
<div class="right">Update</div>
<div class="left">delete</div>
</div>

css here

div.left{
left: 5px;
top:0px;
color: green;
border-style:solid;
border-color: green;
float:left;
}
div.right{
right: 2px;
top:0px;
color: red;
border-style:solid;
border-color: red;
float:right;
}
#result{
width:100%;
border-style:solid;
border-color: blue;
float:left;

}

live example here. http://codepen.io/anon/pen/waKrH

Upvotes: 0

trajce
trajce

Reputation: 1490

Are you trying to achieve this fiddle?

Better way is to change the apsolute into relative,with floating. And if you use floating, dont forget to add overflow:hidden; to the parent container.

Upvotes: 0

chrx
chrx

Reputation: 3572

Ideally the .left and .right divs would be floated:

div.left{
    float: left;
    margin: 5px;
    color: green;
    border-style:solid;
    border-color: green;
}

div.right{
    float: right;
    margin: 5px;
    color: red;
    border-style:solid;
    border-color: red;
}

Upvotes: 1

Raegon
Raegon

Reputation: 40

What you could try is float:left to both of the elements your trying to put side by side, that should push-force them, see if it works and let me know.

Upvotes: 0

Related Questions