Foros del Web » Creando para Internet » CSS »

[problema]float en divs

Estas en el tema de [problema]float en divs en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/01/2008, 15:53
Avatar de seinkraft  
Fecha de Ingreso: diciembre-2007
Mensajes: 119
Antigüedad: 10 años
Puntos: 1
[problema]float en divs

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> 
  #2 (permalink)  
Antiguo 27/01/2008, 16:24
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: [problema]float en divs

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
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 27/01/2008, 21:42
 
Fecha de Ingreso: septiembre-2007
Mensajes: 184
Antigüedad: 10 años, 2 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
  #4 (permalink)  
Antiguo 28/01/2008, 06:22
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Re: [problema]float en divs

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.
  #5 (permalink)  
Antiguo 28/01/2008, 07:31
Avatar de seinkraft  
Fecha de Ingreso: diciembre-2007
Mensajes: 119
Antigüedad: 10 años
Puntos: 1
Re: [problema]float en divs

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/
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:52.