ansaurus

Question

Multiple centered floating divs in a liquid layout

Answer 1

+1 A:

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

Viktor Fero 2010-10-12 10:03:58

Probably the best solution, but will not work in IE6 and 7

Pekka 2010-10-12 10:08:43

Hi Viktor, The problem with that is the boxes dont wrap. I want this display to work in any device. Eg, normal laptop will probably show 3 boxes side by side, but an iphone would just show one on top of the other. But if someone changes the viewport so it knocks a box to the next line it should still center all the boxes

Craig Ward 2010-10-12 10:09:21

Actually, ignore me. Looks like it does work but only shows 2 side by side at the moment which I can change. Cheers :)

Craig Ward 2010-10-12 10:10:38

Answer 2

A:

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>

red-X 2010-10-12 10:05:02

Will work in IE8, but not 7

Pekka 2010-10-12 10:06:16

didn't work in my IE8...

red-X 2010-10-12 10:21:13

Answer 3

A:

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.

Pekka 2010-10-12 10:05:45

ansaurus

tags:

views:

answers:

Multiple centered floating divs in a liquid layout

related questions