ansaurus

Question

Answer 1

A:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<title>Title</title>
<style type="text/css">

    body {
        font-family:Verdana;
        font-size:11px;
    }

    #mainContainer {
        width: 600px;
    }

    .quoteBox {
        width: 300px; /* Half the width of the mainContainer to ensure there is always space to exactly TWO quotes on each row */
        float: left;
    }

    .clearer {
        height: 0;
        font-size: 0;
        clear: both; /* Clear the line to ensure no quotes end up partly below another one. Follow the pattern: Two quotes, clear, two quotes, clear etc... */
    }

    blockquote,cite { margin: 12px }

</style> 
</head>
<body>
<div id="mainContainer">
    <h1>Title</h1>
        <div class="quoteBox">
            <blockquote>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut."</blockquote>
            <cite>Bill, New York</cite>
        </div>

        <div class="quoteBox">
            <blockquote>"Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation." </blockquote>
            <cite>Fred, Detroit</cite>
        </div>

        <div class="clearer">&nbsp;</div>   

        <div class="quoteBox">
            <blockquote>"Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint."</blockquote>
            <cite>Sarah, Seattle</cite>
        </div>

        <div class="quoteBox">
            <blockquote>"Occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut."</blockquote>
            <cite>Phil, Austin</cite>
        </div>

        <div class="clearer">&nbsp;</div>   

        <div class="quoteBox">
            <blockquote>"Labore et dolore magna aliqua. Ut enim ad."</blockquote>
            <cite>Jon, Petrolia</cite>
        </div>

        <div class="quoteBox">
            <blockquote>"Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia."</blockquote>
            <cite>Chris, Burlington</cite>
        </div>

</div>
</body>
</html>

Like this, for example? Reduced the number of excess DIV-elements a bit, plus cleaned the CSS a little. Looks cleaner, and should work the way you described your problem.

blockquote and cite-elements used to add semantic meanings to the document.

Arve Systad 2009-05-07 20:14:47

Answer 2

A:

without deviating much from your original elements (although the suggestion that you add semantic meaning to inner elements is good), I got success by replace your element with this:

body
{
    font-family: Verdana;
    font-size: 11px;
}

div#mainContainer
{
    width: 645px;
}

div.subContainer
{
    margin: 30px;
}

div.subContainer div
{
    vertical-align: top;
    float: left;
    width: 285px;
}

div.contentLeft
{
    margin-right: 45px;
}

Note that your calculations on widths were too low. I tested this with IE8, not FF, but it should work. If you are using IE8, there's a new very powerful Developer Toolbar built in, which includes a Layout pane that shows effective Offset, Margin, Border, and Padding values on all sides of an element.

Alan McBee 2009-05-08 07:34:12

ansaurus

tags:

views:

answers:

CSS2 DIV Presentation Issue

related questions