Div spacing problem

Question

I am trying to space out DIVs. I have five DIVs that are 30px wide and want to put these into another DIV that is 150px wide. Sounds simple but I find the five DIVs don't fit.

5*30 = 150 (but it requires a 166px outer div for them to fit inline)

I have this fiddle

<div class="A">
    <div class="B" >a</div>
    <div class="B" >b</div>
    <div class="B" >c</div>
    <div class="B" >d</div>        
    <div class="B" >e</div>
    <div class="B" >f</div>
</div>

div.A { background-color: Red; width: 150px;}
div.B { display: inline-block; height: 20px; width: 30px;}

Is there something I am missing? I can't understand why the browsers space the way they do.

You've got 6 divs there, buddy. – marchaos Jul 03 '11 at 10:14 — marchaos, Jul 03 '11 at 10:14
I'm watching the first five to see when they wrap around. – Robert Dawson Jul 03 '11 at 10:15 — Robert Dawson, Jul 03 '11 at 10:15

score 4 · Accepted Answer · answered Jul 03 '11 at 10:30

As you are turning the divs into inline elements, the other inline content will also come into play, i.e. the white space between the elements. You get a space between each div, which takes up a few pixels more.

If you remove the white space between the divs, there will be no spaces between them, and five elements fit in 150 pixels:

http://jsfiddle.net/SLq6z/1/

score 0 · Answer 2 · answered Jul 03 '11 at 10:24

0

Can you replace display:inline-block with float:left without causing any other issues? it solves your current problem...

div.B { float:left; height: 20px; width: 30px;}

answered Jul 03 '11 at 10:24

Billy Moon

57,113
24
136
237

score 0 · Answer 3 · edited Jun 05 '12 at 13:03

0

Use float:left property for both your classes A and B ;).

edited Jun 05 '12 at 13:03

Thiem Nguyen

6,345
7
30
50

answered Jul 03 '11 at 10:25

mario.tco

674
1
7
19

Div spacing problem

3 Answers3