Ver Mensaje Individual
  #3 (permalink)  
Antiguo 27/01/2008, 21:42
feral
 
Fecha de Ingreso: septiembre-2007
Mensajes: 184
Antigüedad: 16 años, 6 meses
Puntos: 4
Re: [problema]float en divs

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

}

Última edición por feral; 27/01/2008 a las 22:01