[javanewbie7]

So I'm building a page that will be used by multiple companies, but I'm having some issues. In the first example, with the code for just the two divs, the layout is messed up in the latest browsers (but looks fine in older versions of IE.) I've also posted this code below. Then in the second link, I've pasted the code with a layout of one of the companies that will use the code. It looks better but it pushes the sidebar down.

http://tinyurl.com/bo6ukqe

http://tinyurl.com/cerzfwd

So I'm curious what's the best way to fix this. I need the left div and right div to line up. Currently

1. I want the left and right div to line up. Meaning, both are the same height.
2. I'd like if there's a little bit of space between each row. Currently, the pictures are right on top of each other.
3. I'd like the right div's size to depend on how much room it has. So instead of one company having to have it at 55% because of a sidebar, then another company has to change it to 80% because it doesn't have a sidebar.

Here's the code if you prefer no to dig through the code in the above links:

<style type="text/css">
.body { border : 1pt solid black; }
.left { float : left; width:226px; height:127px;  }
.right { float : right; width : 80%; }
.spacer { clear : both; height: 10px; }
img { border: none; }
p.description {
	line-height:18px;
	color:#767676;
	font-size:12px;
}
p.description a {
	font-weight:bold;
}
a.read-more-link {
	border-top:none;
	text-transform: uppercase;
	margin:0; padding:0;
	font-size:10px;
}
.read-more a {
	border-top:none;
	display: block;
	text-align: right;
	text-transform: uppercase;
	margin:15px 0 0 0; padding:0;
	text-decoration: none;

}

</style>
<div class=body>
  <div class="left""><a href=""><img src="http://image.pbs.org/merlin/d3uly0oc2bnj1.cloudfront.net/hostedbento-prod/filer_public/2012/12/14/104399333.jpg.resize.226x.jpg" alt="GED Connection" /></a>
</div>
  <div class="right"><h4 class="title"><a href="">GED Connection</a></h4>
                <p class="description">GED Connection will help you prepare for all five subjects on the GED&lt;sub&gt;&amp;reg;&lt;/sub&gt; exam, with special attention to the calculator used on the exam, the essay, special answer formats, and tips for test day. </p>
                <div class="read-more">
                   
                    <a href="">Find out more</a>
                   </div>
  <div class="spacer"></div> <!-- note no content -->
</div>

  <div class="left"> <a href=""><img src="http://image.pbs.org/merlin/d3uly0oc2bnj1.cloudfront.net/hostedbento-prod/filer_public/2012/12/14/137949938.jpg.resize.226x.jpg" alt="Pre-GED Connection" /></a>
</div>
  <div class="right""><h4 class="title"><a href="">Pre-GED Connection</a></h4>
                <p class="description">These 26 programs were selected from the GED Connection series to go with the Pre-GED Connection workbooks. </p>
               <div class="read-more">
                  
                 <a href="">Find out more</a>
                   </div>
  <div class="spacer""></div> <!-- note no content -->
</div>

  <div class="left"><a href=""><img src="http://image.pbs.org/merlin/d3uly0oc2bnj1.cloudfront.net/hostedbento-prod/filer_public/2012/12/17/76800952_1.jpg.resize.226x.jpg" alt="Workplace Essential Skills" /></a>
</div>
  <div class="right"> 
                 <h4 class="title"><a href="">Workplace Essential Skills</a></h4>
                <p class="description">Are you ready for a good job? Workplace Essential Skills covers the skills you'll need to find a job and strategies that will help you get ahead. </p>
                 <div class="read-more">
                 
                 <a href="">Find out more</a>
                
                   </div>
  <div class="spacer"></div> <!-- note no content -->
</div>

Thanks for your help.