SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  4. #4
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;}

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    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.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  8. #8
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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}

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Try removing the table-layout:fixed rule and then absolutely place .box.s5.

  10. #10
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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)...


  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Scott Blanchard View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •