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!

[Mikmoro]

No estoy seguro de entenderte, pero si añades más cosas o texto se te descuadra, e imagino que es porque tus elementos "li" tienen una altura determinada que no varía:

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

Por tanto, si añades contenido no pueden crecer.

[sergio87]

eso no me ayuda, pero gracias por responder.

[Mikmoro]

¿Eso no te ayuda? ¿No te da una idea de dónde está el problema?
Pues vaya.

Elimina el height de los "li"

Ahora envuelve todo lo que no es la imagen de cada "li" en una caja:

<li>
<img alt="libro1" src="images/libro_1.jpg"/>
<div id="caja">
<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>Editorial:</strong> LUMEN S.R.L.</p><p><strong>Editorial:</strong> LUMEN S.R.L.</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 title="Comprar este libro!" alt="Click para comprar..." src="images/carrito.jpg"/></a>
</div>
<div class="masinfo">
<p>Mas Información</p>
</div>
<p class="linea_pie">Pie</p>
</div></li>

Y ahora añade en la css el selector:

.caja {margin-left:108px;}

Por último, en el selector #info ul li div.masinfo, cambia tus márgenes por estos:

margin:7px 0pt 0pt 110px;

[sergio87]

ahora si, y me salió!
gracias por tu colaboración ...

saludos,