Centering "n" number of floated boxes within a parent container

**Scott Blanchard** · Jun 27, 2011 23:25

I have a fixed width container div that contains child divs which are each floated left with respect to one another.

Is it possible to center the boxes horizontally in the parent container?

I'm looking for a solution that does not require prior knowlege of how many boxes are present (since it will vary).

HTML Code:

<div class="container">
<div class="box s1">box 1</div>
<div class="box s1">box 1</div>
<div class="box s1">box 1</div>
<div class="box s1">box 1</div>
etc...
</div>

**ralph.m** · Jun 27, 2011 23:43

Paul and Ray have some nice demos of this sort of thing, such as

CSS examples - Centred Floats

Centered Inline-Blocks with Cross Browser Node Fix

Those examples use LIs, but I'm sure you could adapt them to divs.

Here's a useful thread on this, too:
http://www.sitepoint.com/forums/css-...ml#post4652921

**Paul O'B** · Jun 28, 2011 01:17

I'd use the same method that Ralph linked to on Rays site using the inline-block approach.

e.g.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.container {
    text-align:center;
    width:50%;
    margin:auto;
    border:1px solid #000;
    padding:10px;
}
.box {
    display:inline-block;
    width:150px;
    height:150px;
    vertical-align:top;
    margin:5px;
    text-align:left;
    border:1px solid #000;
    background:red;
}
* html .box {display:inline;} /*IE6*/
*+html .box {display:inline;} /*IE7*/
</style>
</head>
<body>
<div class="container">
    <div class="box s1">box 1</div>
    <div class="box s1">box 1</div>
    <div class="box s1">box 1</div>
    <div class="box s1">box 1</div>
</div>
</body>
</html>

See Ray's code for the whitespace node fix though if you need pixel perfection

**Scott Blanchard** · Jun 28, 2011 05:02

Thanks Ralph and Paul. I'm getting some weird behavior due to my upstream css. I thought I might show a more full picture of my layout if it helps.

The problem I'm running into with the example is that the pre-footer area needs to be a fixed width (not 50%, for example) and I want each of the child divs (footer-pre-home) to be equally spaced apart...

HTML Code:

<div class="main">
	<div class="content">main content div</div>
	<div class="sidebar">sidebar div</div>

	<!--Start Pre-footer Div-->
	<div class="pre-footer">
		<div class="sb4 footer-pre-home box s5">
			<div class="textwidget">
				<ul class="social"> 
					<li class="twitter"><a href="http://twitter.com" /></a></li> 
					<li class="facebook"><a href="http://facebook.com" /></a></li> 
				</ul>
			</div>
		</div>
		
		<div class="sb6 footer-pre-home widget_pages">
			<h4>Pages</h4>
			<ul> 
				<li class="page_item page-item-7"><a href="http://localhost/theteareport/about-us" title="About Us">About Us</a></li> 
				<li class="page_item page-item-8"><a href="http://localhost/theteareport/contact-us" title="Contact Us">Contact Us</a></li> 
				<li class="page_item page-item-10"><a href="http://localhost/theteareport/ftc-disclaimer" title="FTC “Disclaimer”">FTC “Disclaimer”</a></li> 
				<li class="page_item page-item-9"><a href="http://localhost/theteareport/privacy-policy" title="Privacy Policy">Privacy Policy</a></li> 
			</ul> 
		</div>
		
		<div class="sb7 footer-pre-home widget_links">
			<h4>Blogroll</h4> 
			<ul class='xoxo blogroll'> 
				<li><a href="http://codex.wordpress.org/">Documentation &amp; Happenings about all things in the WP World!</a></li> 
				<li><a href="http://wordpress.org/extend/plugins/">Plugins</a></li> 
				<li><a href="http://wordpress.org/extend/ideas/">Suggest Ideas</a></li> 
				<li><a href="http://wordpress.org/support/">Support Forum</a></li> 
				<li><a href="http://wordpress.org/extend/themes/">Themes</a></li> 
				<li><a href="http://wordpress.org/news/">WordPress Blog</a></li> 
				<li><a href="http://planet.wordpress.org/">WordPress Planet</a></li> 
			</ul> 
		</div> 

		<div class="sb8 footer-pre-home widget_categories">
			<h4>Categories</h4>		
			<ul> 
				<li class="cat-item cat-item-6"><a href="http://localhost/theteareport/category/chrysanthemum" title="View all posts filed under Chrysanthemum">Chrysanthemum</a> 
			</li> 
				<li class="cat-item cat-item-164"><a href="http://localhost/theteareport/category/blog" title="View all posts filed under My Blog">My Blog</a> 
			</li> 
				<li class="cat-item cat-item-7"><a href="http://localhost/theteareport/category/green-tea/gourmet-tea" title="View all posts filed under Gourmet Tea Good for the soul">Gourmet Tea Good for the soul</a> 
			</li> 
				<li class="cat-item cat-item-8"><a href="http://localhost/theteareport/category/green-tea" title="View all posts filed under Green Tea">Green Tea</a> 
			</li> 
				<li class="cat-item cat-item-4"><a href="http://localhost/theteareport/category/green-tea/chai-tea" title="View all posts filed under Chai Tea">Chai Tea</a> 
			</li> 
				<li class="cat-item cat-item-9"><a href="http://localhost/theteareport/category/herbal-tea" title="View all posts filed under Herbal Chinese Tea">Herbal Chinese Tea</a> 
			</li> 
				<li class="cat-item cat-item-10"><a href="http://localhost/theteareport/category/iced-tea" title="View all posts filed under Iced Tea">Iced Tea</a> 
			</li> 
				<li class="cat-item cat-item-16"><a href="http://localhost/theteareport/category/jasmine-tea" title="View all posts filed under Jasmine Tea">Jasmine Tea</a> 
			</li> 
				<li class="cat-item cat-item-19"><a href="http://localhost/theteareport/category/mint-tea" title="View all posts filed under Mint Tea">Mint Tea</a> 
			</li> 
				<li class="cat-item cat-item-3"><a href="http://localhost/theteareport/category/tea-health-benefits" title="View all posts filed under Tea Health Benefits">Tea Health Benefits</a> 
			</li> 
			</ul> 
		</div>
		<div class="clear">&nbsp;</div>

	<!--End Pre-Footer Div-->
	</div>

<!--End Main Div-->
</div>

Code:

.main {margin:0 auto; text-align:left; width:977px; padding:0;margin-top:90px;}
.content {float:left;width:651px; padding:0 20px 0 0; margin:15px 0 0 0; font-size:90%;min-height:475px; border-right:1px dotted #ccc;}

/* sidebar */
.sidebar {float:left; width:255px; min-height:475px; color:#777; padding:0 10px 5px 30px; border-left:1px dotted #ccc; margin:15px 0 0 -1px;}

/* pre-footer */
.pre-footer {color:#555; padding:20px; margin:20px 0 -50px 0; background:url(spot.gif); border-radius:15px 15px 0 0; -moz-border-radius:15px 15px 0 0;-webkit-border-radius:15px 15px 0 0;*position:relative;}
.pre-footer ul {margin:0; padding:0; list-style-type:none;}
.pre-footer li {margin-bottom:10px;}
.pre-footer li a {color:#555;}
.pre-footer h4 {margin:0 0 10px 0;text-shadow:0 1px #fff;}
.footer-pre-home, .footer-pre-inside {float:left;min-width:125px; max-width:200px; margin:0 20px 60px 0;*margin-bottom:0;}

**PicnicTutorials** · Jun 28, 2011 05:11

Well I just went to test your code... but then what to my wondering eyes should appear... But eight tiny html and no css reindeer.

**Scott Blanchard** · Jun 28, 2011 05:22

Originally Posted by EricWatson

Well I just went to test your code... but then what to my wondering eyes should appear... But eight tiny html and no css reindeer.

Sorry about that Eric. Just posted the code...

Thanks for taking a look. This is the code before adding the centering bits.

**Paul O'B** · Jun 28, 2011 08:22

Assuming that you never have more columns than will fit into one line then I would use the display:table properties for ie8 and above. Only the display:table properties will equally distribute elements across the width.

Something like:

Code:

.sb4,.sb6,.sb7,.sb8{
    display:table-cell;
    float:none;
    border:1px solid #000;
    padding:0 10px;
}
.pre-footer{
    display:table;
    table-layout:fixed;
    width:100%;
    clear:both;
}
.pre-footer .clear{display:none}

For ie6 and 7 I would just float them instead or use the inline-block method to center them.

**Scott Blanchard** · Aug 9, 2011 13:17

Paul, your example works perfectly. However, I have one small problem. The last element in the pre-footer div does not need to be included in the table display calculation. I'm positioning it absolutely on its own line below these boxes.

How can I account for that?

Markup:

HTML Code:

<div class="pre-footer">
	<div class="box s1">
		<h4>Box 1</h4>
		<div class="textwidget">This is box 1 content</div>
	</div>
	
	<div class="box s2">
		<h4>Box 2</h4>
		<div class="textwidget">This is box 2 content</div>
	</div>

	<div class="box s3">
		<h4>Box 3</h4>
		<div class="textwidget">This is box 3 content</div>
	</div>

	<div class="box s4">
		<h4>Box 4</h4>
		<div class="textwidget">This is box 4 content</div>
	</div>

<!--I only want the items above centered in the pre-footer area-->

<!--This box.s5 div is absolutely positioned and should not influence the width allotment of the sibling divs above it (however, it currently does)-->

	<div class="box s5">
		<div class="textwidget">
			<ul class="social"> 
				<li class="twitter"><a href="http://twitter.com"></a></li> 
				<li class="facebook"><a href="http://facebook.com"></a></li> 
				<li class="youtube"><a href="http://youtube.com"></a></li> 
				<li class="linkedin"><a href="http://linkedin.com"></a></li>
				<li class="yahoo"><a href="http://yahoo.com"></a></li>
				<li class="flickr"><a href="http://flickr.com"></a></li>
				<li class="vimeo"><a href="http://vimeo.com"></a></li>
				<li class="blogger"><a href="http://blogger.com"></a></li>
				<li class="stumbleupon"><a href="http://stumbleupon.com"></a></li>
				<li class="rssfeed"><a href="feed/"></a></li>
			</ul>
		</div>
	</div>
	
	<div class="clear">&nbsp;</div>

</div>

CSS...

Code:

.pre-footer .box.s1,.pre-footer .box.s2,.pre-footer .box.s3,.pre-footer .box.s4{
    display:table-cell;
    float:none;
    border:1px solid #000;
    padding:0 10px;
}
.pre-footer{
    display:table;
    table-layout:fixed;
    width:100%;
    clear:both;
	text-align:center;
}
.pre-footer .clear{display:none}

**Paul O'B** · Aug 9, 2011 13:30

Try removing the table-layout:fixed rule and then absolutely place .box.s5.

**Scott Blanchard** · Aug 9, 2011 13:42

Originally Posted by Paul O'B

Try removing the table-layout:fixed rule and then absolutely place .box.s5.

Yep. Suuuuuweeeet!!!

I was also able to add some margin using border-spacing as below (tried margin and discovered it has no effect on display:table)

Code:

.pre-footer{
    display:table;
    width:100%;
    clear:both;
    padding:0 0 15px 15px;
    border-spacing: 20px
}

Results in this (exactly what I was looking for)...

**Paul O'B** · Aug 10, 2011 00:13

Originally Posted by Scott Blanchard

Yep. Suuuuuweeeet!!!

I was also able to add some margin using border-spacing as below (tried margin and discovered it has no effect on display:table)
Results in this (exactly what I was looking for)...

Yes - think "table"

You can't add margin to table-cells but you can use border-spacing to make room.

User Tag List

Thread: Centering "n" number of floated boxes within a parent container

Thread Tools

Display

Centering "n" number of floated boxes within a parent container

Bookmarks

Bookmarks

Posting Permissions