Hi,

Is it possible to make an equal code page layout in which columns do no overlap. I am trying to apply a mousover effect on the columns but as they overlap this is not possible.


Code:
	width:100%;
	clear:left;
   	font-family:Verdana, Geneva, sans-serif;
}


.homepagepopularsearchesmiddle {
	float:left;
  	font-size:90%; 
	width:100%;	
	position:relative;
	right: 33.33%; /*added by Cillian*/
	clear:left;
   	font-family:Verdana, Geneva, sans-serif;
}

.homepagepopularsearches {
	float:left;
	font-size:90%;
	position:relative;
	width:100%;
	right: 33.33%; /*added by Cillian*/
   	font-family:Verdana, Geneva, sans-serif;
	background: #123456; 
}

.homepagepopularsearchescolumn1 {
 	float:left;
	width:29.33%;
	overflow:hidden;
	left: 68.67%; /* added by Cillian */
	position:relative;
	background: #654321; 
}

.homepagepopularsearchescolumn1:hover {
	background: #fff;  
}

.homepagepopularsearchescolumn2 {
	overflow:hidden;
	position:relative;
   	float:left;
	width:29.33%;
	left: 72.67%; /* added by Cillian */
}


.homepagepopularsearchescolumn3 {
	overflow:hidden;
	position:relative;
   	float:left;
	width:29.33%;
	left: 76.67%; /* added by Cillian */
}

.homepagepopularsearchesrightinner {
	float:left;
	width:48%;
	padding-left: 1%;
}