[problema]float en divs

seinkraft · #1 (**permalink**) 27/01/2008, 15:53

Holas, tengo un problema que ya no se que hacer. No logro poder alinear los divs sin que pierda el formato o queden incimados.

Asi deberia quedar.

Y esto es el codigo.

Código HTML:

.post-content-body {
	width:556px;
	height:600px;
	padding:1px;
	background-color: #FFFFFF;
}
.post-content-info {
	width:190px;
	height:58px;
	float:left;
	position:inherit;
	top: 0px;
	left: 0px;
	padding-left:2px;
	background-color: #DDF1FF;
	border: 1px dotted #CDCDCD;
}
.post-content-links {
	width:190px;
	height:342px;
	float:left;
	position:inherit;
	top:64px;
	left: 0px;
	padding-left:2px;
	background-color: #DDF1FF;
	border: 1px dotted #CDCDCD;
}
.post-content-cover {
	width:352px;
	height:402px;
	float:right;
	position:inherit;
	top:0px;
	right:0px;
	padding:2px;
	background-color: #DDF1FF;
	border: 1px dotted #CDCDCD;
}

.post-content-body es el contenedor verde que alojaria a los tres dentro.

Código HTML:

<div class="post-content-body">

<div class="post-content-info">
</div>

<div class="post-content-links">
</div>

<div class="post-content-cover">
</div>

</div>

hades87 · #2 (**permalink**) 27/01/2008, 16:24

mira, te aconsejo que hagas 1 contenedor que seria el rectángulo de fuera. Luego ahí metes 2 rectángulos mas, uno con float left y otro right. En el left creas 2 divs sin float ni nada, y le right lo dejas tal cual, de esa forma ya te tendría que salir bien :D

feral · #3 (**permalink**) 27/01/2008, 21:42

Has mezclado diferentes conceptos de posicionamiento, con el codigo de abajo te funcionara en IE6/7, firefox y Opera. He cambiado algunos parametros y la estructura, pero la colocacion de los elementos es la misma. Cuidado con las alturas y que los dos bloques superiores nunca sobrepasen el ancho total del div contenedor y que tampoco sean lo suficientemente pequeños como para que el ultimo div pueda "subir" hacia arriba.
Para elementos div generalmente es mejor usar ids en vez de class ya que sus propiedades suelen ser unicas pero he respetado tu nomenclatura. Al elemento contenedor lo has nombrado "body", cuidado porque eso no es el body literalmente hablando sino que todos los elementos reposan en el body. He suprimido los bordes , salvo en el bloque contenedor y los paddings, esos los tendras que poner tu segun veas que queden bien, pero siempre con la calculadora a mano de no sobrepasar limites de ancho. Cada bloque le he puesto un color para que los diferencies.

Código HTML:

<!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" xml:lang="es" lang="es">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>titulo</title>
<link href="Untitled-1.css" type="text/css" media="all" rel="stylesheet" />
</head>

<body>

<div class="post-content-body">

<div class="post-content-info">
</div>

<div class="post-content-cover">
</div>

<div class="post-content-links">
</div>



</div>

</body>
</html>

Código HTML:

@charset "utf-8";

* { margin: 0; border: 0; padding: 0; }

body { text-align: center;}

.post-content-body {
	width:556px;
	height:600px;

	background-color: #CCCCCC;
	margin: 25px auto 0 auto;
	border: 1px solid #000000;
	text-align: left;
	
}
.post-content-info {
	width:190px;
	height:58px;
	float:left;
	background-color: #666666;

}
.post-content-links {
	width:190px;
	height:342px;
	background-color: #669999;

	
}
.post-content-cover {
	width:352px;
	height:402px;
	float:right;
	background-color: #6699FF;
/* margen de seguridad*/        
margin-left: 5px

}

metacortex · #4 (**permalink**) 28/01/2008, 06:22

Hay varias formas de hacer lo que quieres, pero lo correcto es que tu contenido conserve el mismo flujo lógico con y sin CSS. Yo lo haría así: Mantendría la misma estructura del HTML que posteaste al principio. A los módulos post-content-info y post-content-link les doy un float:left. Por su parte, post-content-cover sólo necesita un margin-left: 200px (los 190 de tu columna + 10 de espacio) sin definirle ancho. Eso debería solucionar el problema.

seinkraft · #5 (**permalink**) 28/01/2008, 07:31

Gracias a todos.
Termine realizando la forma que me dijo hades87 y tambien resolvi el problema de css.
Gracias.

Asi es como quedo: http://www.misotakus.com/noticias/de...ost-shigofumi/