¿Tengo que configurar la altura del contenedor?

Tengo este codigo:

#container {
    position:relative;
    width:760px;    

    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;

    border: 1px solid #cdcdcd;  
}

#sidebar {
    float:left;
    width: 200px;
    background:red;
}

#wrapper {
    float:left;
    width:460px;
background:blue;

}

and this HTML CODE:

<!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>Example.com</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div id="container">
            <div id="sidebar">
                        LEFT
            </div>

            <div id="wrapper">
                RIGHT
            </div>          
        </div>  
    </body>
</html>

I see that the container has no height.... do I Must set it? I would like to explain the height depending on the height of the inner DIVs, How could i do it?

preguntado el 03 de mayo de 12 a las 17:05

3 Respuestas

You do not have to set the height, just add:

<div style="clear: both;"></div>

directly below any divs that you float.

En su caso, podría hacer esto:

Just add this to your CSS file.

.clear {
  clear: both;
}

And update your HTML file to match

<!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>Example.com</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div id="container">
            <div id="sidebar">
                        LEFT
            </div>

            <div id="wrapper">
                RIGHT
            </div>    
            <div class="clear"></div>      
        </div>  
    </body>
</html>

contestado el 03 de mayo de 12 a las 17:05

thank you! if i don't use it, it does not follow the height of the inner DIVs because it can't understand if there are other elements at the ends? - Dail

@Dail floated elements are removed from the document flow, and thus do not affect 'height' of their parents. clear:both tells the div to resume normal document flow here, and allows it to recognize the height - Tomás Jones

That happens because you used float:left. One solution is to add a clear:both div as follow:

CSS:

.clear {
    clear: both;
}

HTML:

<div id="container">
    <div id="sidebar">LEFT</div>
    <div id="wrapper">RIGHT</div>
    <div class="clear"></div>
</div>

contestado el 03 de mayo de 12 a las 17:05

Give the container the additional CSS

overflow: hidden;

This will break the float with no extra markup
(Will not work with box-shadow inside)

contestado el 03 de mayo de 12 a las 17:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.