Grid of data, but not with a table

HTML & CSS
1

I’m not sure what this technique is called, other than some sort of grid. Unfortunately, I keep coming across CSS grid layouts, which isn’t quite what I’m looking for here.

I have a “contact us” page I’m working with, which display’s a person’s picture and contact details. While this might sound like putting each person in a table cell would be best, the width of the page will vary and people will likely be added and removed (so a table would be a pain to manage).

So, the problem is that all the contact details are in a floated div and there is a table-of-contents div that is also floated. The table-of-contents div pushes the last div on the first row. Is there a way to get it to flow to the next row instead of pushing it down? (the height of the TOC will likely vary).

<!DOCTYPE html><html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>test</title>
<style type="text/css">
/*start reset */
body, div, span, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, p, blockquote, table, th, td { margin:0px; padding:0px; }
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100.01%;
    color: black;
    background-color: #f9f9f9;
}
p { margin: .2em 0 .8em 0; }
ul, ol, li { margin: 0 0 0 1.4em; padding: 0px; }
ul, ol { margin-top: .2em; margin-bottom: .8em; }


a img { border: none; }
td img { vertical-align: bottom; }
thead td img { display:inline; }


.center1, .center, img.centerimage, img.center { text-align: center; margin: 0 auto; }
.center_element { margin: 0 auto; }
.center_text{ text-align: center; }


/* --clearfix hack-- */
.clearfix:after {
    content:" ";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix { display:inline-block; }


/* mac hide \\*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */
/* --end clearfix hack-- */


/*end reset */


#content {
    width:752px;
    margin: 0 auto;
    margin-bottom: 25px;
    font-size: 0.85em;
}
#content .post {
    border-bottom: 2px solid #CCCCCC;
    margin: 0.2em 0 1em;
    padding-bottom: 0.6em;
}


#content .post .entry-header {
    margin-bottom: 1em;
}
#content .post .entry-title {
    font-size: 1.7em;
    font-weight: bold;
    line-height: 0.95em;
}


#content .post .entry-content h2 {
    font-size: 1.4em;
    margin: 1em 0 0.4em;
}
h1, h2 {
    font-weight: bold;
    text-transform: uppercase;
}




#content .post img {
    border: 1px solid #DDDDDD;
    padding: 6px;
}




#content .post #toc_container {
    background: none repeat scroll 0 0 #F1FFFF;
    border:1px solid #CCCCCC;
}
div#toc_container {
    font-size: 0.8em;
    width: 25%;
}
#toc_container {
    margin-bottom: 1em;
    padding: 10px;
}
#toc_container p.toc_title {
    font-weight: bold;
    text-align: center;
}
.toc_wrap_right {
    float: right;
    margin-left: 10px;
}


#content .post div.grid {
    
}
#content .post div.grid div {
    border: 1px solid #CCCCCC;
    border-radius: 4px 4px 4px 4px;
    height: 200px;
    margin: 0.2em;
    padding: 0.8em 0.2em;
    text-align: center;
    width: 200px;
    float: left;
}




#content .post div.grid div img {
    display: block;
    margin: 0 auto 0.4em;
}


#content .post div.grid div p {
    margin: 0 0 1px;
}
#content p {
    line-height: 1.3em;
}




</style>
</head>
<body>




<div id="content">
    <div id="content-inner">


        <div id="post-325" class="post-325 page type-page status-publish hentry post">
            <div class="entry-header"><h1 class="entry-title"><a href="#">Contact Us</a></h1></div>
                            
                            
                                            
            <div class="entry-content">
                <div id="toc_container" class="toc_wrap_right no_bullets"><p class="toc_title">Contents</p>
                <ul class="toc_list">
                <li><a href="#Test_Staff">1 Test Staff</a></li>
                <li><a href="#Testaroonie_Staff">2 Testaroonie Staff</a></li>
                <li><a href="#Department_staff">3 Department Staff</a></li>
                <li><a href="#Other_Department_Staff">4 Other Department Staff</a></li>
                <li><a href="#Area_Staff">5 Area Staff</a></li>
                <li><a href="#Redundancy_Department">6 Redundancy Department</a></li>
                <li><a href="#Small_Department">7 Small Department</a></li>
                <li><a href="#Large_Department">8 Large Department</a></li></ul></div>
                
                <h2><span id="Test_Staff">Test Staff</span></h2>
                
                <div class="grid clearfix">
                    <div>
                        <img class="alignnone size-full" src="http://www.placehold.it/90x113.jpg" alt="" width="90" height="113">
                        <p><a href="mailto:#">Bill Billison</a></p>
                        <p>Intergalactic Poobah</p>
                        <p>555-5555 x555</p>
                    </div>
                    
                    <div>
                        <img class="alignnone size-full" src="http://www.placehold.it/90x113.jpg" alt="" width="90" height="113">
                        <p><a href="mailto:#">Greg Gregginson</a></p>
                        <p>Department of Redundancy Department</p>
                        <p>555-5555 x555</p>
                    </div>
                    
                    <div>
                        <img class="alignnone size-full" src="http://www.placehold.it/90x113.jpg" alt="" width="90" height="113">
                        <p><a href="mailto:#">Molly Mollison</a></p>
                        <p>Staff Staffer</p>
                        <p>555-5555 x555</p>
                    </div>
                    
                    <div>
                        <img class="alignnone size-full" src="http://www.placehold.it/90x113.jpg" alt="" width="90" height="113">
                        <p><a href="mailto:#">Steve Stevenson</a></p>
                        <p>Wood Chucker</p>
                        <p>555-5555 x555</p>
                    </div>
                    
                    <div>
                        <img class="alignnone size-full" src="http://www.placehold.it/90x113.jpg" alt="" width="90" height="113">
                        <p><a href="mailto:#">Bill Billison</a></p>
                        <p>Intergalactic Poobah</p>
                        <p>555-5555 x555</p>
                    </div>
                    
                    <div>
                        <img class="alignnone size-full" src="http://www.placehold.it/90x113.jpg" alt="" width="90" height="113">
                        <p><a href="mailto:#">Greg Gregginson</a></p>
                        <p>Department of Redundancy Department</p>
                        <p>555-5555 x555</p>
                    </div>
                    
                    <div>
                        <img class="alignnone size-full" src="http://www.placehold.it/90x113.jpg" alt="" width="90" height="113">
                        <p><a href="mailto:#">Molly Mollison</a></p>
                        <p>Staff Staffer</p>
                        <p>555-5555 x555</p>
                    </div>
                    
                    <div>
                        <img class="alignnone size-full" src="http://www.placehold.it/90x113.jpg" alt="" width="90" height="113">
                        <p><a href="mailto:#">Steve Stevenson</a></p>
                        <p>Wood Chucker</p>
                        <p>555-5555 x555</p>
                    </div>
                    
                    <div>
                        <img class="alignnone size-full" src="http://www.placehold.it/90x113.jpg" alt="" width="90" height="113">
                        <p><a href="mailto:#">Bill Billison</a></p>
                        <p>Intergalactic Poobah</p>
                        <p>555-5555 x555</p>
                    </div>
                    
                    <div>
                        <img class="alignnone size-full" src="http://www.placehold.it/90x113.jpg" alt="" width="90" height="113">
                        <p><a href="mailto:#">Greg Gregginson</a></p>
                        <p>Department of Redundancy Department</p>
                        <p>555-5555 x555</p>
                    </div>
                    
                    <div>
                        <img class="alignnone size-full" src="http://www.placehold.it/90x113.jpg" alt="" width="90" height="113">
                        <p><a href="mailto:#">Molly Mollison</a></p>
                        <p>Staff Staffer</p>
                        <p>555-5555 x555</p>
                    </div>
                    
                    <div>
                        <img class="alignnone size-full" src="http://www.placehold.it/90x113.jpg" alt="" width="90" height="113">
                        <p><a href="mailto:#">Steve Stevenson</a></p>
                        <p>Wood Chucker</p>
                        <p>555-5555 x555</p>
                    </div>
                    
                    <div>
                        <img class="alignnone size-full" src="http://www.placehold.it/90x113.jpg" alt="" width="90" height="113">
                        <p><a href="mailto:#">Bill Billison</a></p>
                        <p>Intergalactic Poobah</p>
                        <p>555-5555 x555</p>
                    </div>
                    
                    <div>
                        <img class="alignnone size-full" src="http://www.placehold.it/90x113.jpg" alt="" width="90" height="113">
                        <p><a href="mailto:#">Greg Gregginson</a></p>
                        <p>Department of Redundancy Department</p>
                        <p>555-5555 x555</p>
                    </div>
                    
                    <div>
                        <img class="alignnone size-full" src="http://www.placehold.it/90x113.jpg" alt="" width="90" height="113">
                        <p><a href="mailto:#">Molly Mollison</a></p>
                        <p>Staff Staffer</p>
                        <p>555-5555 x555</p>
                    </div>
                    
                    <div>
                        <img class="alignnone size-full" src="http://www.placehold.it/90x113.jpg" alt="" width="90" height="113">
                        <p><a href="mailto:#">Steve Stevenson</a></p>
                        <p>Wood Chucker</p>
                        <p>555-5555 x555</p>
                    </div>
                    
                </div>


                    
                <h2><span id="Testaroonie_Staff">Testaroonie Staff</span></h2>
                
                <div class="grid clearfix">
                    <div>
                        <img class="alignnone size-full" src="http://www.placehold.it/90x113.jpg" alt="" width="90" height="113">
                        <p><a href="mailto:#">Bill Billison</a></p>
                        <p>Intergalactic Poobah</p>
                        <p>555-5555 x555</p>
                    </div>
                    
                    <div>
                        <img class="alignnone size-full" src="http://www.placehold.it/90x113.jpg" alt="" width="90" height="113">
                        <p><a href="mailto:#">Greg Gregginson</a></p>
                        <p>Department of Redundancy Department</p>
                        <p>555-5555 x555</p>
                    </div>
                    
                    <div>
                        <img class="alignnone size-full" src="http://www.placehold.it/90x113.jpg" alt="" width="90" height="113">
                        <p><a href="mailto:#">Molly Mollison</a></p>
                        <p>Staff Staffer</p>
                        <p>555-5555 x555</p>
                    </div>
                    
                    <div>
                        <img class="alignnone size-full" src="http://www.placehold.it/90x113.jpg" alt="" width="90" height="113">
                        <p><a href="mailto:#">Steve Stevenson</a></p>
                        <p>Wood Chucker</p>
                        <p>555-5555 x555</p>
                    </div>
                    
                </div>
                    
            </div>


        </div>
    </div>
</div>




</body>
</html>
2

The magical display: inline-block to the rescue!

#content .post div.grid div {
    border: 1px solid #CCCCCC;
    border-radius: 4px 4px 4px 4px;
    height: 200px;
    margin: 0.2em;
    padding: 0.8em 0.2em;
    text-align: center;
    width: 200px;
    [COLOR="#FF0000"]display:inline-block;
    vertical-align: top;[/COLOR]
}
3

That did the trick, thanks :slight_smile:

To get it working in IE6/7, adding this in an IE6/7 stylesheet after the primary stylesheet seems to get it working (more or less, anyway)


#content .post div.grid div {
     display:inline;
}
4

Yes, I should have mentioned display: inline for those browsers, but they are totally out of my field of view these days. :slight_smile: