Doing This Without Tables

R

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
 
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>
 
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.
 
You must log in or register to reply here.
Back
Top