Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Doing This Without Tables

Discussion in 'Website Design Forum:' started by Roginald, Mar 17, 2011.

  1. Roginald

    Roginald Junior Member

    Hi,

    Been trying to move away from tables recently, and it's going pretty well, except there's a couple of things I can't figure out how to do...

    For example, I'm not sure how to display a list of items in centered equidistant boxes, as you might see on a product list.

    Here's what I'm trying right now:

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB" lang="en-GB">
    <head>
    
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        
        <title>Test</title>
    
        <style type="text/css">
            body {
                background: #eee;
            }
            #wrap {
                background: #fff;
                width: 600px;
                border: 1px solid #ddd;
                padding: 10px;
                margin: 2em auto;
            }
            
            .item {
                background: red;
                color: #fff;
                width: 170px;
                float: left;
                margin-right: 10px;
                margin-bottom: 10px;
                padding: 10px;
            }
        </style>
        
    </head>
    
    <body>
    
        <div id="wrap">
            
            <div class="item">
                <h3>Normal Item</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <div class="item">
                <h3>Normal Item</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <div class="item">
                <h3>Normal Item</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <div class="item">
                <h3>Normal Item</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <div class="item">
                <h3>Normal Item</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <div class="item">
                <h3>Normal Item</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            
            <br style="clear: both" />
            
            <hr />
            
            <div class="item">
                <h3>Normal Item</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <div class="item">
                <h3>Item With a Super Extra Long Title Over Multiple Lines</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <div class="item">
                <h3>Normal Item</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <div class="item">
                <h3>Normal Item</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <div class="item">
                <h3>Normal Item</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <div class="item">
                <h3>Normal Item</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            
            <br style="clear: both" />
            
        </div>
    
    </body>
    </html>
    Notice how it works on the first grouping where everything is the same height, but then gets ruined by one taller box in the second group? :(

    Any secret way of doing this so it doesnt happen?

    Thanks
     
  2. Alex L

    Alex L Senior Member

    Couldn't you just add another clearing line break as below?

    EDIT: Or I may have misunderstood you. Did you want the layout to be fixed or do you want them all to have the same height?

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB" lang="en-GB">
    <head>
    
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        
        <title>Test</title>
    
        <style type="text/css">
            body {
                background: #eee;
            }
            #wrap {
                background: #fff;
                width: 600px;
                border: 1px solid #ddd;
                padding: 10px;
                margin: 2em auto;
            }
            
            .item {
                background: red;
                color: #fff;
                width: 170px;
                float: left;
                margin-right: 10px;
                margin-bottom: 10px;
                padding: 10px;
            }
        </style>
        
    </head>
    
    <body>
    
        <div id="wrap">
            
            <div class="item">
                <h3>Normal Item</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <div class="item">
                <h3>Normal Item</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <div class="item">
                <h3>Normal Item</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <div class="item">
                <h3>Normal Item</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <div class="item">
                <h3>Normal Item</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <div class="item">
                <h3>Normal Item</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            
            <br style="clear: both" />
            
            <hr />
            
            <div class="item">
                <h3>Normal Item</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <div class="item">
                <h3>Item With a Super Extra Long Title Over Multiple Lines</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <div class="item">
                <h3>Normal Item</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
    
    		<br style="clear: both" />
    
            <div class="item">
                <h3>Normal Item</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <div class="item">
                <h3>Normal Item</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <div class="item">
                <h3>Normal Item</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            
            <br style="clear: both" />
            
        </div>
    
    </body>
    </html>
     
  3. Roginald

    Roginald Junior Member

    No, your solution gets the final layout right, the only problem is inserting a clear after every 3 or however many items isn't very nice when you've got a random list of items from a database or something.

    If they're uniform elements all in a row, then you just loop through them super easy, but to put in clears (or new table rows for that matter) in the right places you need a bit more work on the application code side.

    I dunno, I might be being picky but it just seems kind of messy and inelegant to me, so I'm wondering if there's another way to do it in a more segregated manner with CSS.
     
  4. Alex L

    Alex L Senior Member

  5. Roginald

    Roginald Junior Member

Share This Page