Evenly Space Divs Horizontally Along A Div?

[kensbeijing]

I'v got a div which is of about 70% width of the page. Inside the div I need 5 divs next to each other on a row each of about 50px in width. What I need is to evenly space these 50px divs out within the parent div horizontally, from one side to the other. How do I do this? It should be compatible for all browsers especially IE.

[jeffman]

That's a tuffy. I hate to use tables unsemantically, but doing so is the most direct way of achieving the effect you want.An alternative might be to create five transparent divs, and each one is 20% the width of the container. Then each of those divs holds a smaller div whose margin is set for centering. That will create the evenly spaced look you want. Semantically, either technique is not great, but sometimes you gotta do what you gotta do.

[Ingolme]

I have a solution for that, a little complicated mix of nested divs. I came up with the solution myself a long time ago when I needed something like this.At least you're not using tables with it.HTML:

<div class="container"><div class="box">50px wide</div></div><div class="container"><div class="box">50px wide</div></div><div class="container"><div class="box">50px wide</div></div><div class="container"><div class="box">50px wide</div></div><div class="container"><div class="box">50px wide</div></div>

CSS:

.container {  float: left;  width: 20%;  text-align: center;}.box {  width: 50px;  height: 50px;  margin: auto;}

[jlhaslip]

Nice concept.http://jlhaslip.com/sm/5wide/5wide.2.htmlA lot like working with nested tables, for sure.