HTML/CSS Inline-Block no float Divs within divs

Question

I have 3 DIVs within a DIV. The boxes will have an image. Currently they are image placeholders for future.

I would like to use display: inline-block; to line them up on the same line. For some reason they are still vertical instead of horizontal. I do not want to use float as I feel float should be used elsewhere.

HTML:

<div class="quickboxes">
  <div id="box1"><img name="" src="" width="75" height="75" alt="">1</div>
  <div id="box2"><img name="" src="" width="75" height="75" alt="">2</div>
  <div id="box3"><img name="" src="" width="75" height="75" alt="">3</div>
</div>

CSS:

.quickboxes {
    display: inline-block;
}

#box1 {
    width: auto;
}

#box2 {
    width: auto;
}

#box3 {
    width: auto;
}

score 1 · Accepted Answer · answered Mar 06 '13 at 18:13

1

display:inline-block; needs to be in the css for the image divs, not the containing div.

answered Mar 06 '13 at 18:13

Geneb

420
2
13

This fixed it. Interesting, I thought you wanted the parent div to apply it. Thank you for your help. Any suggestions on how to space the child divs evenly? As 'margin:0 auto;' does nothing. – James Mar 06 '13 at 18:22
Change width:auto; on your image divs to be width:33%; – Geneb Mar 06 '13 at 18:25
Awesome Thanks for your help. I actually used align-text:center but I had a feeling that would backfire later. Width:33% worked well. – James Mar 06 '13 at 18:35

score 1 · Answer 2 · answered Mar 06 '13 at 18:14

1

Add the rule:

#box1, #box2,#box3 {
display:inline-block;
}

jsFiddle example

In order for the boxes to be in row, you also have to set the inline-block property on them, not just the parent container (which you probably don't need anyway).

answered Mar 06 '13 at 18:14

j08691

204,283
31
260
272

score 1 · Answer 3 · answered Mar 06 '13 at 21:25

1

An alternate way to avoid using inline-block is to use floats. Float them to the left and clear the floats in each divs.

answered Mar 06 '13 at 21:25

Ali Tabibzadeh

193
1
2
13

score 0 · Answer 4 · answered Mar 07 '13 at 06:58

It would be better if you include inline-block in both as shown:

.quickboxes {
    display: inline-block;
}
#box1, #box2,#box3 {
display:inline-block;
}

And to center these boxes

.quickboxes {
    display: inline-block;
position: relative;
left: -50%; /*- is important for outer div*/
}
#box1,#boc2,#box3{
display: inline-block;
position: relative;
left: 50%; /* + is important for inner div*/
}

HTML/CSS Inline-Block no float Divs within divs

4 Answers4