Altura del contenedor CSS DIv. Preguntas DIV flotantes

Question

¿Se puede forzar una altura de DIV del contenedor para acomodar dos hijos div flotantes? ¿Hay algún truco elegante que pueda usar para hacer eso? Estoy tratando de hacer dos divisiones de igual tamaño dentro del div principal. Me gustaría que aparezcan uno al lado del otro con un pequeño espacio en blanco entre ellos. Child2 tiende a aparecer e ir por debajo de Child1. Nota Child2 contiene una tabla. ¿Debería estar flotando?

HTML:

<div id="parent"> 
    <div id="child1"></div> 
    <div id="child2"> 
    <table><tr><td>content</td></tr></table> 
</div> 
</div> 

CSS:

div#parent 
{ 
    background-color: #C6E4E0; 
    border: solid 3px #017E6F; 
    font-family: Arial; 
    font-size: 10pt; 
    font-weight: bold; 
    padding-left: 5px; 
    padding-right: 5px; 
    width:99%; 
} 

div#parent div 
{ 
    width:49%; 
    float:right; 
    padding:3px; 
} 

div#parent div:first-child 
{ 
    float:left; 
} 

Answer 1

#container { width:200px; } 
.floated { width:100px; float:left; } 
.clear  { clear:both; } 

<div id="container"> 
    <div class="floated">A</div> 
    <div class="floated">B</div> 
    <div class="clear"></div> 
</div> 

Answer 2

No soy un fan de clear: both;, yo prefiero hacer esto en el ejemplo Jonathan Sampsons:

#container { width:200px; overflow: hidden; } 
.floated { width:100px; float:left; } 

 

<div id="container"> 
    <div class="floated">A</div> 
    <div class="floated">B</div> 
</div> 

Answer 3

Por cierto, que desea

div#parent > div { float:left; }

en lugar de

div#parent div:first-child { float:left; }

que todavía no se IE6 amable, pero flotará ambos DIVs niño.

Answer 4

Utilizo la clase clearfix.

.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

.clearfix { 
    display: inline-block; 
} 

/* Hides from IE-mac \*/ 
/** html .clearfix {height: 1%;}*/ 

.clearfix { 
    display: block; 
} 

/* End hide from IE-mac */ 

simplemente utilice la clase en cada contenedor de elementos flotantes.

Answer 5

Este no es un problema para la solución de errores chicos, su problema es que sus dos divs flotados no están apareciendo uno al lado del otro.

En primer lugar, no es necesario establecer el ancho del div principal, los divs son elementos de bloque, lo que significa que ajustan automáticamente su ancho para abarcar todo el ancho de su elemento primario (en este caso, presumiblemente el elemento primario div # parent es el cuerpo).

Debido a que está estableciendo el ancho explícitamente Y dándole relleno, puede extenderse MÁS ALLÁ del cuerpo. Eso realmente no importa, pero si aplicas este mismo conocimiento a los divs flotados del niño y puedes ver por qué el derecho puede ser bajado al fondo.

En primer lugar, si establece explícitamente el ancho de los div en un porcentaje, no necesita agregar relleno. Como se trata de anchos de porcentaje, es mejor agregar relleno al contenido de los divs en lugar de los divs en sí, porque el relleno se AGREGA al ancho. Por lo tanto, si agrega un relleno de 10 píxeles a un div que tiene un ancho del 49% en un elemento primario de 100 píxeles, tendrá un ancho de 49 píxeles + 10 píxeles + 10 píxeles (2 lados) para un ancho calculado total de 69 píxeles.

Dado que no ha publicado su marcado y contenido ni en qué navegador está probando, no puedo decir exactamente por qué se está bajando el div. Hay dos posibilidades probables.

1. Está utilizando IE, que permite que las tablas se extiendan más allá de su div principal lo que causará roturas. Intente establecer explícitamente el ancho de la tabla en un porcentaje de su elemento primario o algo así.
2. El 49% width + relleno = mayor que [parent-width] - [left-div-width]. Esto hará que se baje debido a que el div izquierdo y el div derecho son demasiado anchos para el ancho principal.