CODEWITHSUNDEEP
csshtml
sun
sun

Reputation: 1668

How to position absolute positioned div in floated parent?

I tried to position a arrow div in the edge of floated div right, so i given absolute position to arrow and left to 0.

I know absolute position won't be in the static flow and it is different from others. even thought it should obey the left value according to their parent, isn't it?

Why in the js the arrow is not placed at the border of right div rather it placing in the outer div

HTML

<div id="wrapper">
<div id="right">
    <div id="arrow">
      arr
    </div>
</div>
</div>

css

#wrapper{
    width:500px;
    height:500px;
    border:2px solid green;
}
#right {
    float:right;
    width:250px;
    height:250px;
    border:2px solid green;

}
#arrow {
    position:absolute;
    background-color:blue;
    color:white;
    left:0;
}

Upvotes: 0

Views: 197

Answers (3)

Vladislav Stanic
Vladislav Stanic

Reputation: 795

You have to do position: relative; on its parent with id="right".

Relavant link on position

Upvotes: 1

Dan Goodspeed
Dan Goodspeed

Reputation: 3560

http://jsfiddle.net/3tAnA/2/

I changed #arrow to 

right:0;

instead of left.

and added position:relative; to the #right.

Upvotes: 0

Andrew
Andrew

Reputation: 5340

#right {
    ...
    position:relative;
}

See this: http://jsfiddle.net/3tAnA/1/

Upvotes: 0

Related Questions