CODEWITHSUNDEEP
htmlcss
user3004356
user3004356

Reputation: 880

Window resizing causes the second div to overlap over the first

I'm working on a site, where it contains three divs (one header and two below). Now, when I resize the window the second div content gets overlapped on the first nav.
Below is the HTML of the code : 

<div id = "container">
<div id="header">
<center><img src = "images/logo.png" /></center>
</div>
<br />
<div id="nav">
<center><br />
<a href='#'>Index</a><br />
<a href='#'>About</a><br />
<a href='#'>Contact</a>
</center>
</div>
<div id="content"></div>
</div>

CSS :

div#container {
    position: relative;
    width: 75%;
    margin: 0 auto;
}
body {
    background-color: #121212
}
div#header {
    background-color: #900;
    width: 100%;
    height: 10%;
    border: 2px solid #488ed0;
    margin: 0 auto;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
div#nav {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    background-color: #900;
    border: 2px solid #488ed0;
    width: 24%;
    height: 900px;
    float: left;
    margin-right: 2%;
}
div#content {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    border: 2px solid #488ed0;
    background-color: #900;
    width: 74%;
    height: 900px;
    float: left;
}
a {
    color: #FFFFFF;
    text-decoration: none;
}
a:hover {
    color: #000000; 
    text-decoration: underline;
}

Fiddle
How can I adjust such that the second div does not get overlapped over the first when the window is resized and all contents remain fixed with scroll added at the bottom.

Upvotes: 1

Views: 1222

Answers (1)

user3585606
user3585606

Reputation: 51

You didn't define the position of below elements while expecting it to adjust. The default position value is static which may cause trouble with adjustment.

Making your wrappers relative should solve this problem.

Like this:

div#header {
    position:relative;
}
div#nav {
    position:relative;
}
div#content {
    position:relative;
}

If above doesn't solve the problem, add float:left; to above elements together with the position:relative;

Upvotes: 1

Related Questions