dudas con css

[sergio87]

Yo tengo una web que estoy haciendo en mi trabajo ... http://www.iuean.edu.ar/libreria/index.html

mi duda es con las listas en la parte de informacion central en la columna del medio..
tengo mis libros y mi texto con su respectivo carrito de compras y un mas información..

si yo agrego mas informacion de cada libro se me desarma toda la estructura, no se porque .. yo quiero que se respete "la columna" libro - texto al lado..

se entiende .. no es complejo de explicar, para mi si de hacerlo ..

CODIGO HTML

Código HTML:

<div id="info">
				<h1>NOVEDADES</h1>
				<ul>
					<li>
						<img src="images/libro_1.jpg" alt="libro1" />
						<h2>70 JUEGOS PARA DINÁMICA DE GRUPOS</h2>
						<p><strong>Autor:</strong> FRITZEN SILVINO JOSE</p>
						<p><strong>Editorial:</strong> LUMEN S.R.L.</p>
						<p><strong>ISBN:</strong> 9789507249099</p>
						<p class="precio">Precio: $22,00</p>
						<div class="carrito">
							<a href="#"><img src="images/carrito.jpg" alt="Click para comprar..." title="Comprar este libro!" /></a>
						</div>
						<div class="masinfo">
							<p>Mas Información</p>
						</div>
						<p class="linea_pie">Pie</p>
					</li>
				</ul>
</div> 

CÓDIGO CSS

Código:

/* -----------------------------------------------------------/* INFO */
#info p{
font-family: arial;
font-size: 0.8em;
padding: 0 50px 0 0;
}

#info ul{
list-style: none;
}

	#info ul li{
	width: 400px;
	height: 150px;
	}

		#info ul li img{
		float: left;
		padding: 0 10px 5px 10px;
		}
		
		#info ul li p.precio{
		float: left;
		font-size: 0.8em;
		font-weight: bold;
		color: #3e6c9f;
		padding: 10px 5px 0 0;
		}
		#info ul li p.precio2{
		float: left;
		font-size: 0.8em;
		font-weight: bold;
		color: #3e6c9f;
		padding: 10px 0 0 30px;
		}
		#info ul li div.masinfo{
		width: 120px;
		height: 22px;
		border: none;
		margin: 7px 0 0 230px;
		background: url("images/btn_masinfo.jpg") no-repeat;
		}
		#info ul li div.masinfo p{
		display: block;
		width: 95px;
		margin: 0 0 0 20px;
		padding: 4px 0 0 0;
		font-size: 0.7em;
		}
		#info ul li div.masinfo p:hover{
		color: red;
		cursor: pointer;
		}
		#info ul li div.carrito{
		float: right;
		}
		#info ul li div.carrito a img{
		border: none;
		margin: 0 0 30px 0;
		}
		#info ul li div.carrito2 a img{
		border: none;
		margin: 0 30px 30px 0;
		}			
		#info ul li p.linea_pie{
		margin: 30px 0 0 10px;
		background: url("images/linea_top.jpg") repeat-x;		
		text-indent: -99999px;
		}		
		#info .paginas{
		padding: 0 0 10px 20px;
		}
		
		#info ul li h2{
		font-family: arial;
		font-size: 0.8em;
		color: #e1323d;
		}
		
		#info ul li p{	
		display: block;
		text-align: left;
		}
		
h1{
font-family: arial;
font-size: 0.9em;
background: url("images/h1_bg.jpg");
border: 1px solid black;
width: 390px;
color: #fff;
height: 20px;
margin: 0 0 10px 10px;
padding: 0 0 0 10px;
}

GRACIAS A QUIEN ME AYUDE A RESOLVER MI PROBLEMA..
SALUDOS!