Question

I have div callad subHeader inside I have:

1 – subHeaderLeft

2 – subHeaderRight

when i displayed to browser the subHeaderLeft/right are out from subHeader and not inside.

why the subHeaderLeft/right are out side from subHeader ?

You can see Demo jsFiddle.

Thanks for any help.

html code:

<div id="subHeader">
      <div id="subHeaderLeft"></div>
      <div id="subHeaderRight"></div>
</div>

css code:

#subHeader{
      width: 200px;
      height:100px;
      Helvetica, sans-serif;
      margin: 10px auto;
      border: 3px solid #6fb2e6;
      background: pink;
      }    

#subHeaderLeft{
      position:absolute;
      left:0;
      top:0;      
      width: 70px;
      height:100px;
      margin: 0;
      border: 3px solid #6fb2e6;
      background: white;
      }
#subHeaderRight{
      position:absolute;
      right:0;    
      top:0;      
      width: 30px;
      height:100px;
      margin: 0;
      border: 3px solid #6fb2e6;
      background: yellow;
      }       

​

Answer 1

What is happening is the absolutely positioned elements are positioning themselves in relation to the body element instead of their direct parent.

A page element with relative positioning gives you the control to absolutely position children elements inside of it.

So just add

position:relative 

to your parent #subHeader.

This way the absolute positioning of the children work on its parent.

http://jsfiddle.net/qjfUk/9/