Problema de Maquetacion

xArchangellx · #1 (**permalink**) 09/08/2011, 16:18

Hola amigos espero que me puedan ayudar soy novato en CSS
1. NO puedo dubir el DIV de la derecha (amarillo)
2. NO puedo juntar los DIV de arriba (verde)

Código HTML:

<body>
<div id="contenedor">

<div id="primero">
  <p>primero</p>
</div>

<div id="segundo">
<p>segundo</p>
</div>

<div id="izquierda1">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="izquierda2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="derecha">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

</div><!--fin contenedor-->
</body>

y mi CSS es

Código:

#contenedor {
background:#CCCCCC;
width: 700px;
height: 1200px;
margin: 0 auto;
}

#primero {
width: 700px;
height: 100px;
background:#00FF00
/*float:left;*/
}

#segundo {
width: 700px;
height: 100px;
background:#00FF00;
}

#izquierda1 {
	width: 490px;
	background:#0000FF;
	float:left;
}

#izquierda2 {
	width: 490px;
	background:#FF00FF;
	float:left;
}

div#derecha {
	width: 200px;
	height: 400px;
	background:#FFFF00;
	float:right;
}

este es mi error

Lo que necesito es que el DIV (amarillo) pueda subir
y los DIVs verdes se junten
Ayuda porfa

ArturoGallegos · #2 (**permalink**) 09/08/2011, 16:32

para los div verdes necesitas un reset CSS y en lugar de dar margen entre los elementos <p> aplica un padding interno

algo burdo, rápido y funcional para ejemplo es aplicar al inicio de tu css

Código CSS:

Ver original*{margin:0;padding:0;}
p{padding:8px 0;}

la primera linea es un reset hecho a las carreras busca algún otro en san google mas completo

para la barra amarilla derecha solo coloca el código antes que el de la izquierda algo como

Código HTML:

Ver original<div id="derecha">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
 
<div id="izquierda1">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
 
<div id="izquierda2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

y listo eso fue todo ñ.ñ

xArchangellx · #3 (**permalink**) 09/08/2011, 16:41

Gracias ya me funciono, era muy sencillo