Forums

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
    Posts
  • #43701
    yoyo
    Participant

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

    here is the [pen](http://codepen.io/yoyo/pen/AvJqI )

    #129850
    Paulie_D
    Member

    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: http://codepen.io/Paulie-D/pen/klweh

    #129851
    Paulie_D
    Member

    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!

    http://codepen.io/Paulie-D/pen/ekJCo

    #129860
    yoyo
    Participant

    @Paulie_D

    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](http://codepen.io/yoyo/pen/AvJqI )

    #129863
    Paulie_D
    Member

    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

    #129869
    yoyo
    Participant

    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.