error con div float

xlos_mas_pro · #1 (**permalink**) 20/05/2011, 15:15

hola a todos mi problema es el siguiente estoy maquetando mi web con div con float left y y creado un contenedor principal adentro e puesto la cabecera que no contiene float y los div de contenido y meu que son tres con float left y en le pie de pagina quiero poner 2 div y al primero le e puesto clear left y al segundo no se como hacer para que se situé junto al otro pero debajo de los div centrales

en realidad e intentado y buscado en internet pero no lo encuentro

gracias de ante mano XD

IsaBelM · #2 (**permalink**) 20/05/2011, 15:24

poca ayuda puedes recibir si no muestras el código (css y html resumido)

xlos_mas_pro · #3 (**permalink**) 20/05/2011, 15:41

aqui esta el css no creo que sea nesesario poner el html creo que si lees el css entenderas la posision de cada capa:

Cita:

@charset "utf-8";
body{
background-color:#036;
margin-bottom:5px;
margin-left:3px;
margin-right:3px;
margin-top:0px;
text-align:center;
}
#pagina{
text-align:left;
width:1024px;
height:auto;
margin:auto;
background-color:#CCC;
}
#barra_sup {
height: 100px;
width: 1024px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000;
background-image:url(img_pag/cabecera.png);
}
#box_derecho{
color:#CCCCCC;
float:left;
width:145px;
height:500px;
background-color:#0066FF;
margin-right:5px;
margin-top:7px;
margin-bottom:7px;
display:table;
}
#box_derecho a{
color:#FFFFFF;
text-align:left;
text-decoration:underline;
font-size:18px;
}
#box_derecho a:hover{
color:#FFFFFF;
text-align:center;
text-decoration:none;
font-size:18px;
}
#datos{
float:left;
width:500px;
height:500px;
margin-top:7px;
background-color:#FF9900;
margin-bottom:7px;
display:table;
}
#box_izquierdo{
color:#FFFFFF;
float:left;
width:370px;
height:500px;
background-color:#0066FF;
margin-left:4px;
margin-top:7px;
margin-bottom:7px;
display:table;
}
#box_inferior_1{
width:512px;
height:200px;
background-color:#6633FF;
display:table;
padding-left:4px;
clear:left;
}
#box_inferior_2{
width:490px;
height:100px;
background-color:#00CC00;
text-align:center;
clear:left;
}
#box_inferior_2 a{
color:#000000;
font-size:18px;
text-decoration:underline;
}
#box_inferior_2 a:hover{
color:#0033FF;
font-size:16px;
text-decoration:none;
}

ArturoGallegos · #4 (**permalink**) 20/05/2011, 15:55

Cita:

Iniciado por xlos_mas_pro

aqui esta el css no creo que sea nesesario poner el html creo que si lees el css entenderas la posision de cada capa:

aunque usted crea que no es necesario el html créame que si lo es para entender bien el flujo de cada elemento ya que aunque el css diga una cosa si el html esta mal estructurado aunque las reglas css esten bien no funcionara.

xlos_mas_pro · #5 (**permalink**) 20/05/2011, 16:02

aqui esta el html

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mundosic(Perfil)</title>
<link href="estilo2.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">

</style>
<body>
<div id="pagina">
<div id="barra_sup">

</div>
<div id="box_derecho">
<a href="publica/sisturl.php">-->Publicar Link</a><br />
<a href="sistemadenoticias/sistnoticias.php">-->Crear Post</a><br />
<a href="usuarios/bususuarios.php">-->Buscar Usuario</a><br />
<a href="sisgrupos/mgrupos.php">--> Grupos </a><br />
<a href="usuarios/modifica.php">-->Modificar Datos</a><br />
<a href="publica/url.php">-->Ver link</a><br />
<a href="sistemadenoticias/mipagina.php">-->Ver Post</a><br />
<a href="salir.php">-->Salir</a><br />
<hr />
Este contenido es solo para usuarios registrados y que esten con su session activa.<br/>
"No revele sus datos personales" y mantenga su contenido en forma privada.
</div>

<div id="datos">

aqui contenido php muy extenso

</div>
<div id="box_izquierdo">
<strong>-¿Como crear un post?</strong><br />
Entra al link crear un post en la parte izquierda de la pantalla en el menu y escribe un titulo.<br />
<br />
<strong>-¿como publico un link?</strong><br />
Muy facil lo unico que tienes que hacer es entrar en el menu publica un link y escribe una url descripcion y titulo de el link a publicar.<br />
<br />
<strong>-¿como crear o unirce a un grupo?</strong><br />
Entra a la opcion de grupo -->> crear grupo --> escribe los datos seleciconados y publica tu grupo. Para unirce a un grupo aun mas facil solo tienes que selecionar el grupo y pinchar o clikiar en el boton unirce al grupo.<br />
<br />
<strong>-¿como creo una duda o pregunta?</strong><br />
Entra a las opcion del menu "Crea una pregunta" y realiza los mismos pasos que en crear un posteo.
</div>
<div id="box_inferior_1">
<p><b style="color:#FC0; font-size:19px;">Infomacion</b><br />
En los links que ves a tu derecha encontraras informacion solo para usuarios registrados y privada se a añadido una nueva seccion en la cual se permiten dejar mensajes privados a los usuarios.<br />
¿Como hacer esto? Muy sencillo solo selecciona el link del menu superior izquierdo buscar usuarios y selecciona el usuario al cual le quieres dejar el mensaje privado y en la parte inferior se encuentra un formulario el cual debes rellenar para dejar un mensaje privado. tambien se pueden dejar auto mensajes por si tu quieres guardar algun contenido de informacion.</p>
</div>

<div id="box_inferior_2">
<a href="pagina1/comentarios_perfil.php">Ver comentarios publicos</a><br/>
<a href="pagina1/subir_img.php">Subir imagen</a><br/>
<a href="pagina1/ver_img_usu.php">Ver imagenes del usuario</a><br/>
<a href="mensajes/mensajes_p.php">Mis mensajes privados</a>
</div>

</div>
</body>
</html>

IsaBelM · #6 (**permalink**) 20/05/2011, 16:21

prueba con este css

Cita:

#footer {
clear:left;
}

#box_inferior_1{
width:512px;
height:200px;
background-color:#6633FF;
display:table;
padding-left:4px;
display: inline-block;
}
#box_inferior_2{
width:490px;
height:100px;
background-color:#00CC00;
text-align:center;
display: inline-block;
vertical-align: top;
}

el html

Cita:

<div id="footer">

<div id="box_inferior_1">
<p><b style="color:#FC0; font-size:19px;">Infomacion</b><br />
En los links que ves a tu derecha encontraras informacion solo para usuarios registrados y privada se a añadido una nueva seccion en la cual se permiten dejar mensajes privados a los usuarios.<br />
¿Como hacer esto? Muy sencillo solo selecciona el link del menu superior izquierdo buscar usuarios y selecciona el usuario al cual le quieres dejar el mensaje privado y en la parte inferior se encuentra un formulario el cual debes rellenar para dejar un mensaje privado. tambien se pueden dejar auto mensajes por si tu quieres guardar algun contenido de informacion.</p>
</div>

<div id="box_inferior_2">
<a href="pagina1/comentarios_perfil.php">Ver comentarios publicos</a><br/>
<a href="pagina1/subir_img.php">Subir imagen</a><br/>
<a href="pagina1/ver_img_usu.php">Ver imagenes del usuario</a><br/>
<a href="mensajes/mensajes_p.php">Mis mensajes privados</a>
</div>

</div>

</div>

xlos_mas_pro · #7 (**permalink**) 20/05/2011, 17:03

muchas gracias me a sido de gran ayuda

xlos_mas_pro · #8 (**permalink**) 20/05/2011, 17:56

sigo teniendo el problema me funciona al visualisarlo en dreamweaver pero no me funciona al vusualisarlo en un navegador sigo sin poder hacerlo que que otra solucion puedo tener

McPinkY18 · #9 (**permalink**) 20/05/2011, 20:40

Hola, estuve leyendo tu problema y hice un layout parecido que se ve igual en ie6+ y en losd emas navegadores no se si te sirva pero compara los codigos y te puedes dar una idea.

http://pastebin.com/sBYKGNHk

chau mucha suerte

IsaBelM · #10 (**permalink**) 21/05/2011, 05:23

Cita:

Iniciado por xlos_mas_pro

sigo teniendo el problema me funciona al visualisarlo en dreamweaver pero no me funciona al vusualisarlo en un navegador sigo sin poder hacerlo que que otra solucion puedo tener

acabo de probarlo en ie8, ff, chrome, opera y safari y en todos funciona
por decir algo, a ver si se te ha olvido este selector, por que no lo resalté en negrita

Cita:

#footer {
clear:left;
}

xlos_mas_pro · #11 (**permalink**) 21/05/2011, 10:16

gracias ya lo e solucionado estuve revisando el codigo que me dejo McPinkY18 y leido atentamente lo de IsaBelM y encontre la solucion se lo agrades

Les doy Karma XD
gracias

McPinkY18 · #12 (**permalink**) 22/05/2011, 02:33

mayormente estos problemas es por que nunca toman en cuenta los pixeles anchos paddings y bordes jeje suerte amigo