Cuadrar divs dentro de contenedor.

helacer · #1 (**permalink**) 30/07/2011, 02:30

Buenas estoy haciedndo unoscambios a una web y necesito estructurar asi la infromación

Cree un div contenedor y adentro los 4 divs pero n oe podido dejarlo asi como esta en la imagen... me pueden colaborar diciendome como seria el css... gracias

Uploaded with ImageShack.us

al titulo le puse float left y a la imagen right pero hay nose como hacer par acuadr los otros ... les agradzco me ayuden con el css correcto...

IsaBelM · #2 (**permalink**) 30/07/2011, 05:16

prueba así

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#contenedorprincipal {
width: 300px;
height:auto
}

.contenedorsecundario {
float: left;
margin: 0 10px;
background-color: yellow;
}
</style>
</head>
<body>

<div id="contenedorprincipal">

<div class="contenedorsecundario">

<div class="contenido">contenido 1 izquierda</div>
<div class="contenido">contenido 2 izquierda</div>

</div>

<div class="contenedorsecundario">

<div class="contenido">contenido 1 derecha</div>
<div class="contenido">contenido 2 derecha</div>

</div>

</div>

</body>
</html>

helacer · #3 (**permalink**) 30/07/2011, 10:49

Gracias por su respuesta.... Ta lo cuadre segun sus indicaciones, pero me sigue presentando problema se me desordena.. ME puede ayudar a mirar que errores tengo? gracias

Código HTML:

/* Estilos CSS Catalogo de Productos VirtueMart */
.HomProduct
{
	width:90%;	
	background-color:#F4F4F4;
	height:auto;
}
.InHome
{
	float: left;
	margin: 0 5px;
	background-color: #F4F4F4;
}
.ImaProduct
{
	width:50%;
}
.ImaProduct img
{
	width: 70%;
	height: 70%;
	border:inset #039;
	overflow: hidden;
	text-align:center;
}
.NamProduct
{
	float:left;
	overflow:auto;		
}
.NamProduct a,
.NamProduct a:link,
.NamProduct a:visited,
.NamProduct a.visited,
.NamProduct a:hover,
.NamProduct a.hovered
{
	color:#900;
    font-family: Arial, Helvetica, Sans-Serif;
    font-style: normal;
    font-weight: bold;
    font-size: 25px;
}
.DesProduct
{
	color:#003;
    font-family: Arial, Helvetica, Sans-Serif;
    font-style: normal;
    font-size: 14px;
	padding: 40px 5px 5px 10px;
	width:50%;
}
.ImgShoProduct
{
	float: right;		
}
.ImgIn
{
	float: left;
}

Otra cosa... hay alguna forma que la imagen ImgShoProduct se adapte al div .. .es decri es que aveces bienen imagenes horizontales y aveces verticales necesite que se ajuste n ome vaya a dañar el div... GRACIAS

IsaBelM · #4 (**permalink**) 30/07/2011, 13:18

Cita:

Iniciado por helacer

Gracias por su respuesta.... Ta lo cuadre segun sus indicaciones, pero me sigue presentando problema se me desordena.. ME puede ayudar a mirar que errores tengo? gracias

sólo teniendo el css, yo al menos, no puedo ayudarte. es necesario tener el html, que tiene que se igual que el que te dejé en el anterior mensaje

Cita:

Iniciado por helacer

Otra cosa... hay alguna forma que la imagen ImgShoProduct se adapte al div .. .es decri es que aveces bienen imagenes horizontales y aveces verticales necesite que se ajuste n ome vaya a dañar el div... GRACIAS

este tema se trato hace ya algún tiempo, pero no recuerdo como se solucionaba, si es que se podía, y, tampoco he logrado encontrarlo