problema con float

qoncept · #1 (**permalink**) 04/12/2011, 18:17

Hola a todos!

Este es mi primer post y tengo un problema con el uso de float en un archivito..
Es la pagina de bienvenida para ingresar al sitio.
Necesito que quede así:

y se ve así:

El css:

#principal {
height: 400px;
width: 400px;
margin-right: auto;
margin-left: auto;
}
#principal #1_index {
height: 200px;
width: 400px;
float: left;
}
#principal #2_index {
float: left;
height: 50px;
width: 200px;
}
#principal #3_index {
float: left;
height: 50px;
width: 200px;
}
#principal #4_index {
height: 150px;
width: 400px;
float: left;
}

En la vista de dreamweaver ("Diseño") se ve bien y al hacer preview en el explorador se desarma. Lo probé en Iexplorer y Firefox.
Parece facil pero no se que onda por qué no me funciona.

Ojala me ayuden.
Saludos!

emprear · #2 (**permalink**) 04/12/2011, 21:55

Por ser este tu primer post. te hago una recomendación, primero lee esto
http://www.forosdelweb.com/f4/proble...6/#post4053759

Tu caso es similar, tendrías que exponer tanto el css como el html, si no no se sabe que es cada cosa.

Sobre tu código, el primer error de importancia es que algunos de los nombres de tus id comiencen por un número,
#1_xxx --> error
#xxx_1 --> correcto

un esquema básico para hacer lo que estas mostrando sería

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
#contenedor_1{
width: 400px;
height: 400px;
margin: 0 auto;
border: solid 1px #000;
}
#mayor{
text-align: center;
height: 50px;
width: 100%;
}
.sino{
text-align: center;
width: 50%;
height: 50px;
float: left;
}
/*]]>*/
</style>
</head>
<body>
<div id="contenedor_1">
<div id="mayor" style="background-color: lightgreen;">Eres mayor</div>
<div class="sino" style="background-color: lime;">A</div>
<div class="sino" style="background-color: orange;">B</div>
</div>
</body>
</html>

Saludos y Bienvenido

qoncept · #3 (**permalink**) 05/12/2011, 13:20

Excelente!!

Gracias por la ayuda; cambié los números por palabras, y problema solucionado.
Saludos!!!

PD: tomaré en cuenta la subida de html y css para la proxima!