views:

162

answers:

2

I have a max-width em based container for my layout. Within it I have many floated fixed width boxes, at 230px to be exact.

At the max-width the container will expand to 90em's. This fit's 6 boxes per line perfectly. As the window sizes down and boxes are bumped to lower rows it leaves a non-symmetrical gap on the right. I understand why. But I would like to force the container of the boxes to center them at all times.

To illustrate:

At full width: http://cl.ly/7393a462f44b8315aaba

At smaller width: http://cl.ly/ff48a18d39c4f57c3513

How I would like smaller width to work: http://cl.ly/ae9c3fd04df515253b2d (Photoshoped)

My markup looks like this:

   <div id="bricks" class="group">
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
   </div><!--end #bricks-->

My CSS, is:

div#bricks {
margin:0 auto;
background:red;
width:100%;
}

div.brick {
background:#181c21;
width:230px;
margin:0 5px 10px 5px;
position:relative;
float:left;
}

div.brick img {
background:#666;
max-width:230px;
}

The #bricks is inside a #main, which looks like:

div#main {
margin:0 auto;
padding:0 50px;
position:relative;
max-width:90em;
}

The group class on #bricks is:

.group:after {
content:".";
clear:both;
display:block;
height:0;
visibility:hidden;
}

Would love some ideas!

+1  A: 

Update:

Code to demonstrate "alignment 1" (pure CSS) AND "alignment 2" (needs javascript) is now appended, below.


Not the answer you want, but AFAIR, you can't do that with CSS and a fluid layout.
You can center div#bricks content if you are willing to put up with this kind of alignment:
(1)

■■■■■
 ■■■

But not:
(2)

■■■■■
■■■

To do the latter, you'll need javascript to:

  1. Measure the size of div#bricks. (ContainerSize)
  2. Measure the size of an individual div.brick. (BrickSize)
  3. Compute the "margin" = ContainerSize % BrickSize .
  4. Append div.bricks style with: left: {margin / 2} .

Of course, I'd love to be proved wrong.


Code for "alignment 1":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"&gt;
<html>
<head>
    <title>Flexiblock, Centered Layout, CSS only</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <style  type="text/css">
        div#main {
        margin:0 auto;
        padding:0 50px;
        position:relative;
        max-width:90em;

        /*-- Added styles, below --
        */
        color:white;
        }

        .group:after {
        content:".";
        clear:both;
        display:block;
        height:0;
        visibility:hidden;
        }

        div#bricks {
        margin:0 auto;
        background:red;
        width:100%;

        /*-- Added styles, below --
        */
        text-align:center;
        }

        div.brick {
        background:#181c21;
        width:230px;
        position:relative;

        /*-- Deleted
        float:left;
        margin:0 5px 10px 5px;
        */

        /*-- Added styles, below --
        */
        display: inline-block;
        text-align:left;
        margin:0 2px 10px 2px;
        }

        div.brick img {
        background:#666;
        max-width:230px;
        }
    </style>

    <!--[if lte IE 7]>
    <style  type="text/css">
        div.brick {
        display: inline;
        }
    </style>
    <![endif]-->
</head>

<body>
<div id="main">
  <div id="bricks" class="group">
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
   </div><!--end #bricks-->
</div>
</body>
</html>

.

Code for "alignment 2":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"&gt;
<html>
<head>
    <title>Flexiblock, Centered Layout, needs JS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <style  type="text/css">
        div#main {
        margin:0 auto;
        padding:0 50px;
        position:relative;
        max-width:90em;

        /*-- Added styles, below --
        */
        color:white;
        }

        .group:after {
        content:".";
        clear:both;
        display:block;
        height:0;
        visibility:hidden;
        }

        div#bricks {
        margin:0 auto;
        background:red;
        width:100%;
        }

        div.brick {
        background:#181c21;
        width:230px;
        margin:0 5px 10px 5px;
        position:relative;
        float:left;
        }

        div.brick img {
        background:#666;
        max-width:230px;
        }
    </style>

    <!-- Our javascript requires jQuery. -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">
    function CenterBrickSet ()
    {
        /*---
               1. Measure the size of div#bricks. (ContainerSize)
               2. Measure the size of an individual div.brick. (BrickSize)
               3. Compute the "margin" = ContainerSize % BrickSize .
               4. Append div.bricks style with: left: {margin / 2} .

               Requires jQuery (for cross-browser use).
        */
        var iContainerWidth     = $('#bricks')[0].clientWidth;

        /*---   Get the "brick" width by comparing the left offsets of the first two bricks.  This
                accounts for margin.
        */
        var zBrickSet           = $('.brick');
        var iBrickWidth         = zBrickSet[1].offsetLeft  -  zBrickSet[0].offsetLeft;
        if (!iBrickWidth)
            iBrickWidth         = zBrickSet[0].clientWidth + 10; //-- 10 is total margin width from the style (pixels).

        var iMarginAdjust       = (iContainerWidth % iBrickWidth) / 2;

        /*-- Set each brick's left position.  Alternatively adjust the global style.
        */
        zBrickSet.each
        (
            function () {$(this)[0].style.left  = iMarginAdjust + 'px';}
        );
    }


    $(document).ready (CenterBrickSet);
    </script>
</head>

<body>
<div id="main">
  <div id="bricks" class="group">
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
    <div class="brick">
     <h3>Biodesign</h3>
     <p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
    </div>
   </div><!--end #bricks-->
</div>
</body>
</html>
Brock Adams
I think the former example you showed would be fine for my purposes. Just not familiar with JS enough to accomplish on my own? Care to give it a whirl? Seems like the sort of solution that could be useful for many!
Fuego DeBassi
By "former" do you mean layout "1" -- which doesn't fully do what you ask?Or layout "2" -- which seems to require javascript?The previous comment was not clear to me.
Brock Adams
Ideally option 2 would be the scenario I'd choose--with javascript. But, I'm okay with option 1. Just not sure how to center it in such a manner beyond what I have already done.
Fuego DeBassi
OK, I added demo pages, for both approaches, to my answer.
Brock Adams
You rule. Fact. Going with op #1.
Fuego DeBassi
A: 

Try changing two of you're declarations to:

div#bricks {
margin:0 auto;
background:red;
width:100%;
text-align: center; /* Centers it's inline children. */
}

div.brick {
display: inline-block; /* Makes it act like a inline/block mutant. */
background:#181c21;
width:230px;
margin:0 5px 10px 5px;
position:relative;
}

The only problem with this code is that inline-block support is fuzzy. But you can read this article to solve this: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

Sam
This code also does not do what the OP wants (see his desired image, above). It creates the 1st alignment as seen in my answer; he wants the 2nd alignment.
Brock Adams
I'm not sure this actually does anything. Getting the same results with it? Good thought tho.
Fuego DeBassi