I am trying to align divs of images horizontally. I tried to use float yet this cause the images to be displayed outside the border of the parent class.

Using display:inline; display:block without using float caused the onmouse over event to disappear!!!

Using float with any of the above effects causes the images to be displayed outside the border of the parent class

here is my css code:

Code CSS:
* html .threepxfix{
margin-left: 3px;
body {
	background-image: url(images/bg.png);
	background-repeat: repeat-x;
	text-align: center;
	font-family: verdana;
	font-size: 12px;
.placeholder {
	margin: auto;
	width: 800px;
	text-align: left;
#logo {
	background-image: url(images/logo.png);
	background-repeat: no-repeat;
	height: 87px;
	width: 318px;
	float: left;
	position: absolute;
#emptyspace {
	height: 90px;
.kader {
	border: 1px solid #cd500d;
	background-color: #fbf3ee;
	padding: 6px;
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
.transOFF {width: 100%; background-color: silver; 
border:1px solid black; 
margin: 0 5px 5px 0;  
 display: inline; float:left;   }
.transON  {width: 100%; background-color: silver;
 opacity:.50; filter: alpha(opacity=50);
 -moz-opacity: 0.5;border:1px solid black;
 margin: 0 5px 5px 0; display:inline;
 float:left;   }


Code HTML4Strict:
<div class="placeholder">
  <div id="logo"></div>
  <div id="emptyspace"></div>
  <div id="maincontent">
    <p>Here come the top wallpapers</p>
    <div class="kader">
    <div class="gallerycontainer">
("select * from downloads where download_type_id='1' order by download_count desc limit 3");
while ($row=mysql_fetch_array($result))
<div class="transON" style="width:100px;
height:119px;" onmouseover="this.className='transOFF'" 
onmouseout="this.className='transON'" >
<a href="<?php echo "downloaddetail.php?id=$download_id" ; ?>">
<img src="<?php echo $fullimgsrc; ?>" width="100" height="119" style="border:1px solid black;"></a>
} //end of while loop