Cant get these DIV's to line up nicely

HTML & CSS
1

Hi.

I am strugling to get these div’s to line up.

This is my code.



<!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>
#resultsDiv
	{
		background-image:url(../images/results.png);
		height:200px;
		padding-left:20px;
		background-repeat:no-repeat;
	}
#resultsDiv .thumbnail
	{
		padding:10px;
		height:130px;
		width:140px;
		float:left;
	}

#resultsDiv .ratings
	{
		clear:left;
		padding-left:10px;
		height:30px;
		width:140px;

	}
#resultsDiv .articleTitle
	{
		padding-right:10px;
		padding-top:10px;
		width:420px;
		float:right;
		text-align:left;
	}
	
#resultsDiv .subContent
	{
		clear:both;
		padding-right:10px;
		padding-top:3px;
		width:420px;
		height:117px;
		text-align:left;
		font-family:Verdana, Geneva, sans-serif;
		font-size:10px;
	}
#resultsDiv .information
	{
		width:420px;
		padding-right:10px;
		float:right;
	}
</style>
</head>

<body>

<div id="resultsDiv">
<div class="thumbnail">thumbnail</div><div class="articleTitle">This is the article Title</div>	
<div class="ratings">ratings</div><div 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</div>
<div class="information">This is the information div</div>

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

What I am trying to do is line up the thumbnail and ratings on the left stacked on top of each other and the other 3 elements to line up on each other on the right side.

I have fiddled and fiddled and come up with differing variations that sort of work but I am always having trouble with rating div appearing somewhere else.

Thanks
Chris

2

Because a floated item cannot appear higher than anything that is previous to it in the markup you will need to restructure your HTLM code.

This is how I would handle it. Also so for semantics sake I made your title heading, and since I assume .subContent will always be a paragraph… i made that a P tag. Hope this helps.


<!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
	{
		background-image:url(../images/results.png);
		min-height:200px;
		padding-left:20px;
		background-repeat:no-repeat;
		overflow:hidden;
		border: 1px solid #000;
	}
#resultsDiv .thumbnail
	{
		padding:10px;
		height:130px;
		width:140px;
	}

#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;
	}
	
#resultsDiv .visuals{float: left; }
#resultsDiv h3, #resultsDiv .textual{float:right; clear: right;background:#ccc;}

#resultsDiv h3	{background: pink;}

</style>
</head>

<body>

<div id="resultsDiv">
	<h3>This is the article Title</h3>	
	<div class="visuals"><div class="thumbnail">thumbnail</div><div class="ratings">ratings</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>

</body>
</html>
3

Hi.

Thanks so much for that. I think I can get my head arround what you did and also I think I understand why you did it how you did.

So thanks very much for that.

Chris