2012-08-25 21 views
6

Soy bastante nuevo a CSS, así, esto podría parecer tonto:La propiedad de flotación de CSS no muestra altura?

En CSS, utilizo la propiedad a float:left para posicionar un contenido deja al elemento vecino, ahora, tengo un contenedor para todos los elementos que tienen la propiedad flotante. ¿Cómo hago para que el elemento de crianza ajuste su altura de acuerdo con su contenido?

el código HTML:

<div id="page"> 
<div id="side"> 
    <p>my sidebar</p> 
</div> 
<div id="content"> 
    <p>my content</p> 
    <p>my content1</p> 
    <p>my content2</p> 
    <p>my content3</p> 
</div> 

la CSS

/* the "border:3px solid #000;" are used to make the div border visble*/ 
#page{ 
position:relative; 
width:400px; 
background-color: #F4F0EC; 
border:3px solid #000; 
} 
#side{ 

border:3px solid #000; 
float:left; 
} 
#content{ 
float:left; 
border:3px solid #000; 
} 

con lo anterior, el aspecto <div id="page"> como que tiene una altura de 0px .... ¿Cómo puedo hacer ¿deforma el contenido?

ya que soy nuevo en CSS, por favor explique lo que estoy haciendo mal, gracias

violín: http://jsfiddle.net/AuSmP/

Respuesta

11

Puede añadir overflow:hidden para su div #page que le permitirá cambiar el tamaño para adaptarse a su contenido.

See Working Demo.

Learn more about overflow property.

Como alternativa también se puede añadir <div class="clear"></div> y luego CSS.clear{clear:both;} para lograr el mismo.

See Demo.

+0

¡Amigo, nunca he estado tan feliz de conocer un nuevo atributo de CSS! ¡Muchas gracias! –

3

Cambiar de posición de relativa a absoluta puede también ayudar a salir
Marque esta JSFiddle Demo

+0

+1 para otra alternativa al problema :) – freebird

3

¿Es esto lo que esperaba? http://jsfiddle.net/AuSmP/4/ simplemente agregue el flotador: estilo izquierdo a #page arreglará el truco, o también podría usar clear: ambos en la parte inferior

+0

Buena respuesta alex .... Sigue así ... – Wazzzy

Cuestiones relacionadas