SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)

    Grid of data, but not with a table

    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.

    chrome_grid-of-data.png

    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).

    Code:
    <!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>
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    The magical display: inline-block to the rescue!

    Code:
    #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;
        display:inline-block;
        vertical-align: top;
    }

  3. #3
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The magical display: inline-block to the rescue!

    Code:
    #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;
        display:inline-block;
        vertical-align: top;
    }
    That did the trick, thanks

    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)

    Code:
    #content .post div.grid div {
         display:inline;
    }
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Yes, I should have mentioned display: inline for those browsers, but they are totally out of my field of view these days.


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
  •