Centering Left Floated Divs

HTML & CSS
1

I have 5 divs of specific widths that are floated left (so they all flow)

The div surrounding them however is dynamic width

so like this:

<div style=“width: 100%”>
<div style=“width: 100px;”></div>
<div style=“width: 100px;”></div>
<div style=“width: 100px;”></div>
</div>

How Can I center all of the middle divs based on the dynamic width even if they are floated left?

Thanks,

Jordan

2

Paul O’ B knows everything :wink:

3

You could wrap the floats in a set 500px div and place a margin:auto on that. You would need to calculate the width. The solution by Paul looks like you don’t need to calculate the widths, so it’s variable. I’d check that out.

4

Wrap the five 100px floated fixed width divs in another div with a width set to 500px and margin:auto; ?

5

You can center floats by doing the following:

#outer {
    float:left;
    position:relative;
    right:-50%; 
}


#inner {
    position:relative;
    right:50%; 
}


.column {
    width:100px;
    float:left;
    background:black;
}


<div id="outer">
  <div id="inner">
    <div class="column">Center column</div>
    <div class="column">Center column</div>
    <div class="column">Center column</div>
  </div>
</div>
6

@kohoutek

Nice that worked perfect, even in IE thanks!

I think that was the Paul O’ Brian method mentioned above but it applies more directly to what I was trying.

7

@Jordash, yep, I learned that from Paul. :slight_smile: