How do you center align floating divs where the parent container doesn't have a width?

Question

I know similar questions have been asked before but I haven't seen one where the parent div has an unknown width with a definitive answer.

So here's the situation.

<style>
.parent {
   width: 100%;
}

.child {
  width: 300px;
  float: left;
}

</style>

<div class="parent>
  <div class="child></div>
  <div class="child></div>
  <div class="child></div>
  <div class="child></div>
  <div class="child></div>
  <div class="child></div>
  ...
  <div class="child></div>
<div>

Basically, I want to fit as many child divs in the parent container as the user's screen resolution can support.

I don't want to use css3 media queries because I want to support IE7.

I tried using javascript to specify a width to the parent but it's not ideal as the content jumps to the center after it loads. Any ideas?

http://stackoverflow.com/questions/2865380/how-do-i-center-align-horizontal-ul-menu — reisio, Nov 15 '11 at 03:31

score 25 · Answer 1 · answered Jul 14 '12 at 21:08

25

Just use display:inline-block; instead of float: left; and for .parent use text-align: center.

answered Jul 14 '12 at 21:08

Roman

904
1
9
19

score 4 · Accepted Answer · edited Jul 31 '14 at 19:53

This is the nearest solution without the use of javascript. It is display:inline-block; that makes divs side bar side and being in center at the same time. I've try turning .parent into display:table-cell; but didn't work. So need to use the actual <table> for the powerful centering behavior.

http://jsfiddle.net/Dgdhr/

Edited: http://jsfiddle.net/Dgdhr/1 (without table: thanks to MartinodF)

<table width="100%">
<tr>
<td align="center">   
          <div class="child">1</div>
          <div class="child">2</div>
          <div class="child">3</div>
          <div class="child">4</div>
          <div class="child">5</div>
          <div class="child">6</div>   
</td>
</tr>
</table>

.child {
    width: 100px;
    height:100px;
    margin:10px;
    display:inline-block;
    background:#e0e0e0;
}

The problem with this is if you have different content within the children divs; http://jsfiddle.net/Dgdhr/76/ — Marcus, Oct 28 '15 at 15:33

score 1 · Answer 3 · answered Mar 07 '14 at 00:28

1

Using Roman answer I ended with this. All div inside my parent div will center, so you dont need to set child class.

.parent{
    text-align: center;
}

.parent div{
    display: inline-block;
}

answered Mar 07 '14 at 00:28

Renan Ceratto

130
2
12

How do you center align floating divs where the parent container doesn't have a width?

3 Answers3

Linked