[SOLUCIONADO] divs verticales en una misma linea

davixe · #1 (**permalink**) 16/04/2014, 09:18

Hola, veran, recien me he iniciado en esto de la programación web y antes de cualquier otra cosa me he dado la tarea de aprender html & css.

En el camino queriendo hacer cierto arreglo de las divisiones se me ha complicado algo, de primeras no se muy bien como explicarlo así que lo dejo en una imagen.

Quiero saber como lograr este comportamiento directo de las divisiones sin jugar mucho con otros contenedores. De antemano ¡muchas gracias!

Hufex · #2 (**permalink**) 16/04/2014, 09:59

esto no es programar , solo es el diseño , te recomiendo leer sobre css se ocupa para temas como este , suerte

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            .izq{
                width: 48%;
                height: 99%;
                border: 3px #993300 solid;
                float: left;
            }
            .dech{
                float: left;
                width: 48%;
                height: 23%;
                clear:right;
                border: 3px #993300 solid;
            }
            #contenedor{
                width: 500px;
                height: 500px;
                background-color:#6699CC;
            }
        </style>
    </head>
    <body>
        <div id="contenedor">
            <div class="izq">caja 1</div>
            <div class="dech">caja 2</div>
            <div class="dech">caja 3</div>
            <div class="dech">caja 4</div>
            <div class="dech">caja 5</div>
        </div>
    </body>
</html>

davixe · #3 (**permalink**) 16/04/2014, 16:16

Hola, yo sé perfectamente que esto no es programar.
Tal como aclaré, emepce con html y css antes de empezar a meterle a cualquier lenguaje como
php o cualquier otro.

Me ha servido lo que has hecho, pero era más cuestión de entender como funcionaba esto.

¡Muchas gracias!

Hufex · #4 (**permalink**) 17/04/2014, 11:36

te dejo una pagina de referencia

http://www.w3schools.com/css/default.asp

davixe · #5 (**permalink**) 17/04/2014, 12:55

Gracias, de ahí es de donde leo casi siempre.

En mi intento por hacer lo que esta en la ilustracion, estaba haciendo el div contenedor de un tamaño inapropiado y eso cambia el comportamiento de los flotantes.

No sabia que variaba y se adaptaban segun el espacio libre.

Resuelto el tema. Muchisimas gracias, Hufex.

pzin · #6 (**permalink**) 18/04/2014, 11:00

W3Schools no es una buena fuente para guiarse, está llena de fallos: http://w3fools.com