Home/ Questions/Q 7840227
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T15:42:31+00:00

I have the following css and html files: body{ text-align: center; background-color: #eeeeee; margin:

  • 0

I have the following css and html files:

body{
    text-align: center;
    background-color: #eeeeee;
    margin: 0;
    padding: 0;
    font-size: 1em;
    font-family: Helvetica,Arial,sans-serif;
}
#wrapper{
    margin: 0 auto;
    width:900px;
    border: 1px solid #cccccc;
    background-color:#ffffff;
    padding:5px;
}
#banner{
    width:900px;
    height: 150px; 
    background-image: url("../images/logo.png");
    background-repeat: no-repeat; 
}
#separator{
    width:100%;
    height: 5px;
    border: 1px solid #993311;
    background-color: #993300;
}
#navbar{
    height:25px;
    width: 100%;
    background-color: #434a4f; 
}
#topsearch{
    height:25px;
    width: 100%;
    background-color: #434a4f; 
}
#breadcrumb{
    float:left;
    width: 30%;
    background-color: #cccccc;
}
#search{
    float:left;
    width:70%;
    background-color: #fccfcf;
}
#main{
    clear: both;
}
#mainleft{
    float:left;
    width: 21%;
    background-color: #ff0000;

}
#maincenter{
    float:left;
    width: 58%;
    background-color: #00ff00;
}
#mainright{
    float:left;
    width: 21%;
    background-color: #0000ff;
}
#mainright1{
    width: 100%;
    height:20%;
    background-color: #0000ff;
}
#mainright2{
    clear:both;
    width:100%;
    height: 21%;
    background-color: #0000ff;
}
#footer{
    clear: :both;
    width: :100%;
    background-color: #333333;
}

and

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <title>test</title>
        <meta name="description" content="" />
        <meta name="generator" content="Studio 3 http://aptana.com/" />
        <meta name="author" content="byteslash" />

        <meta name="viewport" content="width=device-width; initial-scale=1.0" />

        <link href="css/template.css" type="text/css" rel="stylesheet"/>
    </head>
        <body>

        <div id="wrapper">
            <div id="banner"></div>
            <div id="separator"></div>
            <div id="navbar">
                NavBar
            </div>
            <div id="topsearch">
                <div id="breadcrumb">Breadcrumb</div>
                <div id="search">SearchBox</div>
            </div>

            <div id="main">
                <div id="mainleft">
                    MainLeft
                </div>
                <div id="maincenter">
                    MainCenter
                </div>
                <div id="mainright">
                    <div id="mainright1">MainRight1</div>
                    <div id="mainright2">MainRight2</div>
                </div>              
            </div>
            <div id="footer">
                <h6>Footer</h6>
            </div>
        </div>
    </body>
</html>

if you check the colors, i have mainright2 showing as blue on top of mainright1, which is intended but mainright2 is hanging on top of footer.

I think that one way to solve that would be to somehow make the div main account for all heights defined inside its children, but i dont know how.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is happening because your #main div has a height of 0px – all of its contents are floating. There are many ways to solve this, and one of them is to apply overflow: hidden to the #main div, like that:

    #main{
    overflow: hidden;
    clear: both;
}
    • 0