3 Boxes And CSS

by 3 replies
4
I have 3 boxes of equal width and height. I want them to all line up side by side with equal distance between them. So that I have a box on the left, the middle, and the right.

But I can't seem to get the css right. How would you go about this?
#website design #boxes #css
  • To make such kind of layout, you can go for one of the three options:

    - use CSS3 multi column feature
    CSS3 Multiple Columns
    the drawback is its supported in IE10+

    - use %tage based widths
    make a wrapper div of fixed width and then make three inner divs with width 32% and gaps of 2%.
    vary the %tages to get your desired layout

    - use javascript to modify the width at runtime.

    Feel free to message me if you need help with it.
    • [ 1 ] Thanks
    • [2] replies
    • Thanks very much. I would like to use the % widths because I want this to work well in screen widths of 930px and up. But the boxes should have a fixed width of 300px. I just can't seem to line them up side by side without the 3rd being pushed too low. I will message you about it too. Here is the link to the page by the way: Template 1
    • Thanks for the private messages on this. It helped. I would like to ask one more question. Since I have a container that I will have at a width of 95% the three boxes will be in them. Each box is 300px. What % margin left should I give the 2nd and 3rd boxes to have them all take up the whole container?
Join the discussion

Next Topics on Trending Feed

  • 4

    3 Boxes And CSS

    I have 3 boxes of equal width and height. I want them to all line up side by side with equal distance between them. So that I have a box on the left, the middle, and the right. But I can't seem to get the css right. How would you go about this?