i need to create a page that has quotes side-by-side for a large
number of rows. i am looking for a clean CSS2 presentation where the
quotes of each row line up vertically and don't run below each other.
also, i am looking for a solution with the least amount of code and
preferably one that doesn't float DIVs and does utilize the display
attribute.
re: the code below, my thinking is to contain each quote in its own
DIV (in hopes to have the quotes of one row display side-by-side) and
have the DIVs of one row be contained by a parent DIV (in hopes of
having the quotes in the next row line up vertically). shred the code
apart. start anew. do whatever you need to let me know where i'm
going wrong.
thanks.
<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>
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---
