Multiple centered floating divs in a liquid layout

StackOverflow https://stackoverflow.com/questions/3913383

Question

I have an idea for a layout I would like to use, but I can't get it to work correctly. I am hoping someone on here might be able to help as I have spent hours searching.

The layout is like so.

One wrapper div houses 6 child divs. Those child divs must be centered at ALL times regardless of the size of the wrapper div.

<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; }
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; float: left; background: #fff; }
</style>
</head>
<body>

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <br class="clear" />
</div>

</body>
</html>

The problem is when the browser is resized smaller and a box is knocked onto the line below the boxes will alight left, whereas I want them to be always centered. Is this possible using pure css or do I need to use some jquery?

Was it helpful?

Solution

Probably the easiest solution is if you remove the float: left style from the boxes and change the display property to inline-block. Then all you need to do is to text-align: center on the wrapper. 

<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; text-align:center }
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; background: #fff; display:inline-block }
</style>
</head>
<body>

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <br class="clear" />
</div>

</body>

You can test the code here: http://jsbin.com/uqamu4/edit

OTHER TIPS

You could use text-align: center in the wrapper and display: inline-block for the boxes to make them behave like normal text elements that are centered no matter what.

Caveat: Doesn't work in IE6 and IE 7. Works in Chrome and FF

JSFiddle here.

This wont work in ie 8 or less, dont know about 9, but since your using max-width and min-width which dont work there either I'll post it anyway.

<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; text-align:center; }
.box { width: 280px; padding: 10px; margin:8px; height: 260px; border: 0px; background: #fff; display:inline-block;}

</style>
</head>
<body>

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <br class="clear" />
</div>

</body>
</html>

The solution that worked for me:

<style>
    body {
        /* To center the list */
        text-align: center;
    }

    #wrapper {
        /* To reset 'text-align' to the default */
        text-align: left;

        display: inline;
    }

    .box {
        display: inline-block;
    }
</style>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top