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.

see this john http://jsfiddle.net/rs5An/ . you can use `display: inline-block` instead of `float:left;` — Karuppiah RK, May 14 '14 at 05:11
see this answer http://stackoverflow.com/questions/4750088/css-display-inline-block-issue-with-ie . it will sove your ie issues... — Karuppiah RK, May 14 '14 at 05:15
I would prefer not to use these IE6 hacks. Surely this is possible with floats? — johna, May 14 '14 at 05:18

score 0 · Answer 1 · answered May 14 '14 at 04:54

0

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>

answered May 14 '14 at 04:54

Rashmin Javiya

5,173
3
27
49

My apologies. In my question I didn't mention that it needs to work on a fluid width page. I updated my example and removed the fixed width. – johna May 14 '14 at 04:56
Checked the jsfiddle... The yellow area needs to be centered in the blue area, regardless of page width. – johna May 14 '14 at 05:02
Oh sorry i didn't click update, updated now, yellow divs centered in any width except width lower then 378px and will show scroll bar (size of yellow div is fixed). http://jsfiddle.net/iamrmin/7U7Ya/6/ – Rashmin Javiya May 14 '14 at 05:06
I can't use a fixed width for the blue area. Depending on page width only one yellow block may fit per line, or it might be 10 or more. – johna May 14 '14 at 05:08

Prafulla sahu · Answer 2 · 2014-05-14T06:19:55.020

0

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...

edited May 14 '14 at 06:19

answered May 14 '14 at 05:29

Prafulla sahu

57
8

I cannot use a fixed width like you have on .blueback as this is on a fluid width page. – johna May 14 '14 at 05:38
hi john I have edited my code now check and let me know – Prafulla sahu May 14 '14 at 06:20
Thank you, but that doesn't do what I need because there is only a maximum of 3 yellow boxes per line. I need it to be fluid so there could be 1 yellow box or there could be 10 or more. – johna May 14 '14 at 08:38

score 0 · Accepted Answer · answered May 15 '14 at 04:15

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>

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

3 Answers3