Why does my divs keep overlapping when I resize the screen?

Question

I've done some searching and I just can't seem to find out what's wrong. My main content keeps overlapping the banner. I tried using the position and overflow hidden and auto but I still can't seem to get it right.

Here's the html

<html>
  <head>
      <title> Website </title>
      <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p>
        <div id="Navigation Container"></div>
        <div id="header">
            <a href="index.html"><img src="nav bar logo.png"></a>
        </div>

        <div id='Navigation'>
            <ul>
                <li><a href="#"><font color="#FFFFFF">Contact</font></a></li>
                <li><a href="#"><font color="#FFFFFF">About</font></a></li>
            </ul>
        </div>

        </div></div>

        <div id="Banner">
            <div id="wrapper">
                <div id="container">
                    <img class="banner-img" src="../Banner.png">
                </div>
            </div>
        </div>

        <div id="MainContent">
            <p>
                <font color="#000000">
                    <h1><font face="Palatino Linotype" color="#5DA05D" size="6">Header</font></h1>
                    <font face="Verdana" size="3">
                        <p>Just some text...</p>
                        <p>That keeps overlapping...</p>
                    </font>
                </font>
            </p>
        </div>

        <div id="footer"></div>
    </p>
</body>

Here's the CSS:

body {
    background: #F9F9F9; margin: 0 auto; padding: 0; font: color: #FFFFFF; text-align: center} 
a {
    color: #2b2bf6;}

#header { 
    float: left; 
    position: fixed;
    Align: left;
    clear: both;
    width: 0x; 
    max-width: 100%;    
    height: 70px;   
    margin: 0; 
    padding: 0; 
    border: 0; 
    background: 
    #FFFFFF; 
    z-index: 2;}



#Navigation {  
    width: 100%;
    height: 70px; 
    margin: 0; 
    padding: 0; 
    background: #000000;
    Font-size: 18px;
    float: right;
    position: fixed;
    z-index: 1;
    display: incline-block;
    }

#Navigation Container {
    WIDTH: 100%;
    float: right; 
    background: #282828;
    position: fixed;
    z-index: 0;}

#Banner {
    height: 100%;
    width: 100%;
    margin: auto;
    padding-top: 70px}

#wrapper {
    width: 100%;
    overflow: hidden; }

#container {
    width: 100%;
    margin: 0 auto; }

#banner-img {
    width: 100%;}


#dropdown {
    position: relative; 
    overflow: hidden; }

#MainContent {
    margin-top: -270px; 
    margin-left: 20%;
    margin-right: 20%;
    margin-bottom: 100px;
    text-align: left;}

#footer {
    width: 100%;
    height: 120px;
    background: #282828;
    padding: 0px; } 



#navwrap {
    width: 160px;
    height: 70px;
    Float: right;
    display: incline-block;
    z-index: 4; }

#Searchbar {
    float: left;
    padding: 20px;
    }



ul{
        padding: 0;
        list-style: none;
    height: 70px;

    }
ul li{
        float: right;
        width: 110px;
        text-align: center;
        line-height: 21px;
    }
ul li a{
    display: block;
    height: px;
        padding: 5px 10px;
        color: #333;
        background: #282828;
        text-decoration: none;
    }
ul li a:hover{
        color: #fff;
        background: #3d3d3d;
    }
ul li ul{
        display: none;
    }
ul li:hover ul{
        display: block; 
    }

Please help.

Answer 1

There are a few discrepancies in the HTML posted by you. I have corrected the same. Can you please reuse the HTML and check.

<html>
  <head>
      <title> Website </title>
      <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p>
        <div id="Navigation Container"></div>
        <div id="header">
            <a href="index.html"><img src="nav bar logo.png"></a>
        </div>

        <div id='Navigation'>
            <ul>
                <li><a href="#"><font color="#FFFFFF">Contact</font></a></li>
                <li><a href="#"><font color="#FFFFFF">About</font></a></li>
            </ul>
        </div>
        <div id="Banner">
            <div id="wrapper">
                <div id="container">
                    <img class="banner-img" src="../Banner.png">
                </div>
            </div>
        </div>
        <div id="MainContent">
            <p>
                <font color="#000000">
                    <h1><font face="Palatino Linotype" color="#5DA05D" size="6">Header</font></h1>
                    <font face="Verdana" size="3">
                        <p>Just some text...</p>
                        <p>That keeps overlapping...</p>
                    </font>
                </font>
            </p>
        </div>
        <div id="footer">
        </div>
    </p>
</body>
</html>

Why does my divs keep overlapping when I resize the screen?

Question

1 answers

solution1
1 2015-02-09 06:57:18

Why does my divs keep overlapping when I resize the screen?

Question

1 answers

solution1 1 2015-02-09 06:57:18

solution1
1 2015-02-09 06:57:18