How to center container with unknown width and floated elements inside on fluid page

Question

I know there are lots of ways to center content with an unknown width on a fluid width page in HTML/CSS but I can't get them to work in this case for some reason and need help.

Firstly, let me state that I need a solution that works in common browsers and in IE6 (don't ask why).

Here's an example of markup and the problem. In this example I want the yellow boxes centered inside the blue box.

example on jsfiddle.net

<div style="background:blue;margin:0 auto;width:100%;">
    <table style="margin:0 auto;">
        <tr>
            <td>
                <div style="background:yellow;float:left;padding:50px;">Test</div>
                <div style="background:yellow;float:left;padding:50px;">Test</div>
                <div style="background:yellow;float:left;padding:50px;">Test</div>
                <div style="background:yellow;float:left;padding:50px;">Test</div>
                <div style="background:yellow;float:left;padding:50px;">Test</div>
                <div style="background:yellow;float:left;padding:50px;">Test</div>
            <td>
        </tr>
    </table>
</div>

I tried this method using a table but I also tried the -50% +50% method. I am happy to use any method that works on all common browsers and IE6.

Can someone help me fix it.

Please do not lecture me on IE6 or incorrect use of the TABLE tag.

Answer 1

After lots of research I can find no solution to this that works in all browsers and doesn't require IE6 hacks.

The best solution is display:inline-block and IE6/7 and various other hacks (eg. FF2).

The final solution taken from here is as follows:

<style>
    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;
    }
</style>

<li>
        <div>
            <h4>This is awesome</h4>
            <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
            alt="lobster" width="75" height="75"/>
        </div>
</li>

Answer 2

Try this,

<tr>
    <td>
        <div style="width: 379px;">
            <div style="background:yellow;float:left;padding:50px;">Test</div>
            <div style="background:yellow;float:left;padding:50px;">Test</div>
            <div style="background:yellow;float:left;padding:50px;">Test</div>
            <div style="background:yellow;float:left;padding:50px;">Test</div>
            <div style="background:yellow;float:left;padding:50px;">Test</div>
            <div style="background:yellow;float:left;padding:50px;">Test</div>
        </div>
    </td>
</tr>

Answer 3

what I understood from your requirement that you want to make your div to center ? then please have a look on the below code

<style type="text/css">

.yourclass
{
    background:yellow;
    float:left;
    padding:50px;
}
.blueback
{
    background:blue;    
}
.mytable
{
    width: auto;
    margin-left: auto;
    margin-right: auto;       
}
div.clear
{
   clear:both;
}
</style>

<div class="blueback">
<table class="mytable">
    <tr>
        <td>
            <div class="yourclass">Test</div>
            <div class="yourclass">Test</div>
            <div class="yourclass">Test</div>
            <div class="clear"></div>
            <div class="yourclass">Test</div>
            <div class="yourclass">Test</div>
            <div class="yourclass">Test</div>
        </td>
    </tr>
</table>

Hope it helps...