How do I create 3 equal sized boxes side-by-side?

Discussion in 'CSS Forum' started by SEOGuy, Apr 10, 2013.

  1. SEOGuy

    SEOGuy New Member

    Let's say I have a container with with the following specs: \[code\] .container { width: 960px; margin: 0 auto; height: 500px; }\[/code\]Now in the middle I would like to add the 3 boxes aligned next to each other horizontally with the following specs: \[code\] .box1 { background-color: #000; width: 300px; height: 200px; } .box2 { background-color: #999; width: 300px; height: 200px; } .box3 { background-color: #333; width: 300px; height: 200px; }\[/code\]I tried using margin-top and margin-left on each but that was messy and it was a hassle getting them to look equally aligned with enough gutter between them. What's the best way to create this?
     

Share This Page