Hi All.
Is this css too complex and have I over-thought it…
most of the borders and backgrounds are there for testing so I can see where everything is place etc. It just seems a large amount of code for a simple layout.
Cheers
Chris
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#resultsDiv
{
min-height:200px;
padding:10px;
border: 1px solid #000;
width:600px;
}
#resultsDiv .thumbnail
{
padding:10px;
height:170px;
width:140px;
border: 1px solid #000;
}
#resultsDiv .ratings
{
padding-left:10px;
height:30px;
width:140px;
}
#resultsDiv h3
{
padding-right:10px;
padding-top:10px;
width:420px;
margin:0;
background: pink;
}
#resultsDiv .subContent
{
padding-right:10px;
padding-top:3px;
width:420px;
min-height:117px;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
}
#resultsDiv .information
{
width:420px;
padding-right:10px;
border: 1px solid #000;
}
#resultsDiv .visuals{float: left; }
#resultsDiv h3, #resultsDiv .textual{float:right; clear: right;background:#ccc;}
#resultsDiv h3 {background: pink;}
#resultsWrapper
{
width:620px;
border: 1px solid #000;
padding:10px;
}
#moreInformation
{
min-height:470px;
border: 1px solid #000;
width:600px;
padding:10px;
}
#miVisuals
{
float:left;
}
#miTextual
{
float:right;
clear:right;
border: 1px solid #000;
min-height:200px;
}
#moreInformation .miThumbnail
{
padding:10px;
height:170px;
width:140px;
border: 1px solid #000;
}
#moreInformation .miProfile
{
padding:10px;
min-height:250px;
width:140px;
border: 1px solid #000;
}
#moreInformation .bitopadding
{
padding-top:5px;
}
#miTextual h3
{
padding-right:10px;
padding-top:10px;
width:420px;
margin:0;
background: pink;
}
#miTextual .subContent
{
padding-right:10px;
padding-top:3px;
width:420px;
min-height:380px;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
background-color:#0F0;
}
#miTextual .information
{
width:420px;
padding-right:10px;
border: 1px solid #000;
min-height:32px;
}
</style>
</head>
<body>
<div id="resultsWrapper">
<div id="resultsDiv">
<h3>This is the article Title</h3>
<div class="visuals"><div class="thumbnail">thumbnail</div></div>
<div class="textual">
<p class="subContent">Ut ac magna arcu. Vivamus vitae lacus dictum tortor viverra suscipit. Curabitur sit amet lacus odio, vel pellentesque turpis. Nulla tempor venenatis turpis, elementum rutrum nibh tempor nec. Mauris porttitor porta magna, quis iaculis erat convallis vel. Phasellus sit amet ultricies risus. Nulla nunc lectus, convallis non porttitor a, hendrerit id tortor. Curabitur vel nulla at lacus eleifend vulputate</p>
<div class="information">This is the information div</div>
</div>
</div>
<div id="moreInformation">
<div id="miVisuals">
<div class="miThumbnail">thumbnail</div>
<div class="bitopadding"></div>
<div class="miProfile">profile information</div>
</div>
<div id="miTextual">
<h3>More Information</h3>
<p class="subContent">Ut ac magna arcu. Vivamus vitae lacus dictum tortor viverra suscipit. Curabitur sit amet lacus odio, vel pellentesque turpis. Nulla tempor venenatis turpis, elementum rutrum nibh tempor nec. Mauris porttitor porta magna, quis iaculis erat convallis vel. Phasellus sit amet ultricies risus. Nulla nunc lectus, convallis non porttitor a, hendrerit id tortor. Curabitur vel nulla at lacus eleifend vulputate</p>
<div class="information">This is the information div</div>
</div>
</div>
</div>
</body>
</html>