The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS aligning the div’s vertically

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #43701

    i have a problem in aligning the three div’s **vertically**,what should be problem?

    here is the [pen]( )


    You have to figure some things out…so there is math involved.

    You have a 950px container with 3x300px boxes inside.

    So you have 50px of space inside to separate the three boxes.

    BUT…the left and right border also take up some space….2px times 6 = 12. So now you have 38px left over

    Now, assuming that you want the boxes equally spaced that leaves ‘gaps’…and there are 4 of them.

    38px/4 = 9.5px.

    You get this:


    However, there is a better way…

    Use the `box-sizing:border-box` property and your boxes all remain the size you have set them regardless of borders or padding.

    So…we apply that.

    Your container is now always 950px wide.

    Add some 10px padding and you have 930px to play with (950-10-10).

    With the boxes we have only 30px to play with for margins **but** the first box is already in place because of our padding.

    So we add 10px of `margin-right` to all of the boxes **but** take it off for the last one and, Bingo!



    thanks for the valuable answers

    other than this possibilities, one of my friend insist me to use **float:left** in all the three div’s and set the margins accordingly, its working…is it the right way ? here is the update [pen]( )


    If you look at the Pens I gave you they **are** all floated left. I just applied it to the class as a whole and so I don’t need to apply it to the IDs


    ya right, i unnecessarily use id’s

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.