Home/ Questions/Q 7899563
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T08:44:07+00:00

I have this code: #container { position:relative; width:760px; margin-left: auto; margin-right: auto; margin-top: 10px;

  • 0

I have this code:

#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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

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

    directly below any divs that you float.

    In your case, you could do this:

    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>
    • 0