Help on divs overlapping on window resize

Hi. I’m trying to stop these four panels wrapping/overlapping on window resize.

You can view what I mean here:

http://optimumresults.ie/bottomarea.html

Any help would be very much appreciated!

Kevin

Also here is all the code in one go:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style Type="text/css">
	a.more:link, a.more:visited, a.more:active {
		color:#00548E;
		text-decoration:none;
	}
	a.more:hover {
		color:#00548E;
		text-decoration:none;
		}

		
	#panel1 {
	width:221px;
	height:100px;
	margin-right:22px;
	float:left;
	}
	
	#fourpanels {	
	margin-top:20px;
	margin-left:auto;
	margin-right:auto
	}
	
	#headline {
	float:inherit;
	width:221px;
	height:60px;
	}
	
	#orheader {
	text-align:left;
	font-family:Tahoma;
	font-weight:bold;
	color:#00548E;
	font-size:20px;
	}
	
	#paneltext {
	text-align:left;
	margin-top:10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	margin-bottom:10px
	}
	
	#bottomlogos {
	position:relative;
	top:265px;
	width:608px;
	height:101px;
	margin-left:auto;
	margin-right:auto
	}
</style>
</head>

<body>
<!--OVERALL BOTTOM BEGINS-->
<!--FOUR PANELS BEGINS -->
	<div id="fourpanels">
		<!-- Beginning of Panel -->
	<div id="panel1">
	<div id="headline">
	  <div id="orheader">Our Business Development Process</div>
	</div>
	<div id="pic">
	<img src="images/busdevpic.jpg" width="221" height="160" />	</div>
	<div id="paneltext">
	Optimum Results Ltd was established in 1995 and has maintained its Mission Statement throughout the years: 'Dedicated to Improving the Business Performance of our Clients'.</div>
	<div id="orheader"><span style="color:#FF9900">></span> <a class="more" href="#">Read more</a> </div>
	</div>
	<!-- End of Panel -->
	<!-- Beginning of Panel -->
	<div id="panel1">
	<div id="headline">
	  <div id="orheader">Our Business Development Process</div>
	</div>
	<div id="pic">
	<img src="images/busdevpic.jpg" width="221" height="160" />	</div>
	<div id="paneltext">
	Optimum Results Ltd was established in 1995 and has maintained its Mission Statement throughout the years: 'Dedicated to Improving the Business Performance of our Clients'.</div>
	<div id="orheader"><span style="color:#FF9900">></span> <a class="more" href="#">Read more</a> </div>
	</div>
	<!-- End of Panel -->
	<!-- Beginning of Panel -->
	<div id="panel1">
	<div id="headline">
	  <div id="orheader">Our Business Development Process</div>
	</div>
	<div id="pic">
	<img src="images/busdevpic.jpg" width="221" height="160" />	</div>
	<div id="paneltext">
	Optimum Results Ltd was established in 1995 and has maintained its Mission Statement throughout the years: 'Dedicated to Improving the Business Performance of our Clients'.</div>
	<div id="orheader"><span style="color:#FF9900">></span> <a class="more" href="#">Read more</a> </div>
	</div>
	<!-- End of Panel -->
	<!-- Beginning of Panel -->
	<div id="panel1">
	<div id="headline">
	  <div id="orheader">Our Business Development Process</div>
	</div>
	<div id="pic">
	<img src="images/busdevpic.jpg" width="221" height="160" />	</div>
	<div id="paneltext">
	Optimum Results Ltd was established in 1995 and has maintained its Mission Statement throughout the years: 'Dedicated to Improving the Business Performance of our Clients'.</div>
	<div id="orheader"><span style="color:#FF9900">></span> <a class="more" href="#">Read more</a> </div>
	</div>
	<!-- End of Panel -->
	</div>
<!--FOUR PANELS ENDS -->
<!--OVERALL BOTTOM ENDS-->
</body>
</html> 

If you remove the redundant height setting on #panel1 then the divs won’t overlap. If you don’t want the divs to reposition on smaller windows, then sit a minimum width on their container.

Thanks Ralph. Worked an absolute treat! Thanks.