div flotantes con el tamaño de su contenido

azaz · #1 (**permalink**) 12/12/2012, 13:38

Hola partiendo de un div contenedor lo que necesito es dentro del div contenedor meter dos div mas uno al lado del otro, con float pero lo que quiero es que cada div que tiene el float tenga en ancho segun su contenido dentro.
codigo html

Código HTML:

Ver original<html>
<head>
<style type='text'>
    #contenedor{
        width:1000px;
        float:left;
    }
</style>
</head>
<body>
<div id='contenedor'>
    <div class='uno'>
        <h1>aqui contendio</h1>
    </div>
    <div class='dos'>
        <p>aqui mas contenido</p>
    </div>
</div>
</body>
</html>

alguna idea de como hacerlo.
Saludos.

tommy_tony · #2 (**permalink**) 12/12/2012, 17:49

Código HTML:

Ver original<html>
<head>
<style>
    #contenedor{
        background-color:green;
                width:1000px;
        height:200px;
        }
    .uno{
        background-color:yellow;
        float:left;
    }
    .dos{
        background-color:blue;
        float:left;
    }
 
</style>
 
</head>
 
<body>
    <div id='contenedor'>
            <div class='uno'>
                    <h1>aqui contendio</h1>
            </div>
            <div class='dos'>
                    <p>aqui mas contenido</p>
            </div>
    </div>  
 
</body>
</html>

Simplemente establece el div con su respectivo contenido y a tal div no le pongas "WIDTH" si deseas que el ancho del div se calcule en base a su contenido y si también deseas que la altura se calcule en base a su contenido no le pongas "HEIGHT".Por cierto se aplica el FLOAT:LEFT a los elementos que deseas flotar no al contenedor.

Saludos.

rex16 · #3 (**permalink**) 14/12/2012, 08:29

ese codigo no te servira para el caso porque queda uno arriba del otro y los necesitas al lado, los divs son elementos de bloque y como tal ocupan todo el ancho disponible si no se redimensionan con width.
si quieres mas de un div seguidos horizontalmente con css, necesariamente debes usar width, ej:

#contenedor{width:800px}
.uno{float:left;width:500px}
.dos{float:left;300px}