Issue with CSS2 DIV release
I need to create a page with quotes side by side for a large number of lines. I'm looking for a clean CSS2 presentation where the quotes of each line are lined up vertically and don't work below each other. Also, I'm looking for a solution with the least amount of code and preferably one that doesn't float the DIV and doesn't use the display attribute.
Re: code below, my thinking is to contain each quote in its own DIV (in the hope that the quotes of one line are displayed side by side) and have the DIV of one line contained in the parent DIV (in the hope that the quotes in the next line will line up vertically). discard the code. Start new. Anything you need to tell me where I am wrong.
<html>
<head>
<style type="text/css">
body
{
font-family:Verdana;
font-size:11px;
}
div#mainContainer
{
width:570px;
}
div#mainContainer div.subContainer
{
margin:30px;
}
div#mainContainer div.subContainer div
{
vertical-align:top;
width:285px;
}
div#mainContainer div.subContainer div.contentLeft
{
float:left;
margin-right:45px;
}
div#mainContainer div.subContainer div.contentRight
{
display:inline;
}
</style>
</head>
<body>
<div id="mainContainer">
<h1>Title</h1>
<div class="subContainer">
<div class="contentLeft">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut."
<p>Bill, New York</p>
</div>
<div class="contentRight">
"Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation."
<p>Fred, Detroit</p>
</div>
</div>
<div class="subContainer">
<div class="contentLeft">
"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."
<p>Sarah, Seattle</p>
</div>
<div class="contentRight">
"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."
<p>Phil, Austin</p>
</div>
</div>
<div class="subContainer">
<div class="contentLeft">
"Labore et dolore magna aliqua. Ut enim ad."
<p>Jon, Petrolia</p>
</div>
<div class="contentRight">
"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."
<p>Chris, Burlington</p>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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"> </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"> </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>
How is this, for example? Reduced the number of redundant DIVs a bit, and also cleaned up the CSS a bit. Looks cleaner and should work as you described your problem.
blockquote and cite-elements, used to add meaning to a document.
a source to share
not deviating much from your original elements (although the assumption that you are adding semantic meaning to internal elements is good) I got success replacing your element with the following:
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 width calculations were too low. I've tested this with IE8, not FF, but it should work. If you are using IE8, there is a very powerful new developer toolbar built in, which includes a Layout panel that shows the effective offset, margin, border, and margin values on all sides of an element.
a source to share