Search code examples
htmlcss-floatcenter

How to float all child divs to center inside a parent div?


i use a parent div with three child divs ,

<div id="parentDiv">
    <div id="PagerUp" class="pager">

     </div>
    <div id="ResultsDiv">

    </div>
    <div id="PagerDown" class="pager">

    </div>
</div>

But what i get is this http://img132.imageshack.us/img132/5923/floatingdivs.jpg

How to float all those divs to center.... Hint:I dint apply any css...


Solution

  • Try this:

    #parentDiv {
      width: 600px; /* or whatever width you specify */
      margin:0px auto;
    }
    

    .

    Update:

    Try giving margins to the pagers:

    #PagerUp, #PagerDown
    {
          width: 600px; /* or whatever width you specify */
          margin:0px auto;
    }
    

    Or you can do like this too:

    #PagerUp, #PagerDown
    {
       width: 600px; /* or whatever width you specify */
       margin-left:100px;  /* adjust value accordingly */
       margin-right:100px;  /* adjust value accordingly */
    }