I would like to keep one of these divs active at all times so that it doesnt look like everything is moving when centered on a page.

Also i have used an ease in transition but it wont ease it out?




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 type="text/css">
.rollinfotray {
	height: 400px;
	width: 1000px;
	background-color: #FFF;
}
.infobox1 {
	background-color: #333;
	height: 400px;
	width: 200px;
	float:left;
}
.infobox1:hover {
	width: 400px;
	-moz-transition: 0.3s ease-in-out;
	-webkit-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
	background-color: #09F;
}
.infoboxtitle {
	font-family: impact;
	text-transform: uppercase;
	font-size: 36px;
	margin-left: 5px;
}
.infobox2 {
	background-color: #666;
	height: 400px;
	width: 200px;
	float: left;
}
.infobox2:hover {
	width: 400px;
	-moz-transition: 0.3s ease-in-out;
	-webkit-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
background-color: #09F;
}
.infobox3 {
	background-color: #999;
	height: 400px;
	width: 200px;
	float: left;
}
.infobox3:hover {
	width: 400px;
	-moz-transition: 0.3s ease-in-out;
	-webkit-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
	background-color: #09F;
}


</style>
</head>

<body>

<div class="rollinfotray">
<div class="infobox1">
<div class="infoboxtitle">sdopksdo</div></div>


<div class="infobox2"></div>
<div class="infobox3"></div>
<div class="infobox1"></div>




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