Problema la maquetar con div

angel1993 · #1 (**permalink**) 04/02/2010, 12:33

Bueno tengo un div en la izquierda que tiene que medir 200px y el resto de la pagina tiene que ser otro div que depende de lo grande que tenga cada uno su pantalla pues asi sea..
tengo esto

Código HTML:

Ver original<style type="text/css">
<!--
.ddiv {
    width: 200px;
    border: 1px dotted #000000;
    z-index: 1;
}
.ddiv2 {
    border: 1px dotted #000000;
}
-->
</style>
 
<div class="ddiv" style="float:left">
  <p>&nbsp;</p>
  <p>eeeeeeeeeeeeeeee</p>
<br />
<br />
 
</div><div class="ddiv2">
  <p>dddddddddddddd</p>
  <p>&nbsp;</p>
  </div>

Pero se mete un div dentro de otro :S

Tecna · #2 (**permalink**) 04/02/2010, 16:21

Buenas,

al aplicar la propiedad float a uno de los div lo sacas del flujo normal del documento y es como si no estuviera para el resto de elementos porque no ocupa la posición que debería segun el código HTML y el siguiente elemento "invade" su espacio. Puedes solucionarlo de varias formas: flotar los dos elementos o aplicar un margin left: 200px; a .ddiv2 por ejemplo.

si la clase sólo se aplica a un elemento mejor usar #id que además tiene más peso especifico a la hora de aplicar un valor si hay varios valores declarados

AlbertoGarcia · #3 (**permalink**) 04/02/2010, 17:36

Código HTML:

Ver original<html>
<head>
<style type="text/css">
<!--
#col-izquierda{
    float: left;
    width: 200px;
    border: 1px dotted #000;
}
 
#principal {
    margin-left: 210px;
    border: 1px dotted #000;
}
-->
</style>
</head>
<body>
 
<div id="col-izquierda">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet lobortis diam tempor euismod. Pellentesque purus metus, fringilla at suscipit vel, sodales at nunc. Donec lacinia, nunc id scelerisque feugiat, est nulla suscipit orci, ut scelerisque mi dolor vel mauris. </p>
</div>
 
<div id="principal">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet lobortis diam tempor euismod. Pellentesque purus metus, fringilla at suscipit vel, sodales at nunc. Donec lacinia, nunc id scelerisque feugiat, est nulla suscipit orci, ut scelerisque mi dolor vel mauris. </p>
</div> 
</body>
</html>

Lo que te ha dicho Tecna

en código (es que estoy aburrido esta noche

)
Procura no usar estilos en linea ni usar las etiquetas html para controlar la presentación.

Salud!

angel1993 · #4 (**permalink**) 04/02/2010, 18:26

Gracias chicos