4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

3 Boxes And CSS

by jbearnolimits
3 replies
  • WEB DESIGN
    • |
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?
#boxes #css
  • Profile picture of the author Creative Kunal
    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.
    {{ DiscussionBoard.errors[9968691].message }}
    • Profile picture of the author jbearnolimits
      Originally Posted by Creative Kunal View Post

      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.
      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
      {{ DiscussionBoard.errors[9968707].message }}
    • Profile picture of the author jbearnolimits
      Originally Posted by Creative Kunal View Post

      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.
      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?
      {{ DiscussionBoard.errors[9968815].message }}

Trending Topics