Why my div wont float to the right edge

Question

i have two div like this

<div id="pos-bar">
  <div id="pointer"></div>
</div>

and the css is like this

#pos-bar {
 height: 10px;
 width: 960px;
 margin: 0 auto; }

#pointer{
 height: 4px;
 width: 180px;
 float: right;
 background-color: #57c5a0; }

i try to make "pointer" div to float to the right edge of "pos-bar" div, but with this code it only floated to the middle of "pos-bar" div. And whenever i try to add margin left to "pointer", the div go down, not in the "pos-bar div anymore. Why is this happening?

Answer 1

I fyou want #pointer to float all the way right, you need to expand the parent's width to the total width of window.

For this, you can remove width:960px; on #post-bar it will then expand by default to the total width of it's container and it's child ( #pointer ) will be able to float all the way right.

See this FIDDLE

Answer 2

Just add a float:right to pos-bar div. Child get out the parents if child and parent not share some important css characteristics. Like absolute/relative positions.