Problem with Header overlaying page content


#1

Hi, I'm wondering if somebody could help me out with this? When I add a margin-top to my form, it stays the same distance from the header, but pulls the header down from the top of the page. I looked at inspector in Chrome, and the header is over the top of the form. I'm at a loss.

<html>
  <head>
    <meta name="viewport" content="width=device-width">
    <meta charset="utf-8">
    <title>Fresh Track    |   Synth driven dance/funk/rock music</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Candal|Passion+One:400,700,900|Nunito:400,300,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link rel="css/lightbox.css" rel="stylesheet">
  </head>
  <body>
    <div id="myNav" class="overlay">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <div class="overlay-content">
           <a href="index.html" class="selected">Home</a>
           <a href="about.html">About</a>
           <a href="media.html">Media</a>
           <a href="dates.html">Dates</a>
           <a href="contact.html">Contact</a>
      </div>
    </div>
    <div id="main">
      <script type="text/javascript">
                /* Open when someone clicks on the span element */
        function openNav() {
            document.getElementById("myNav").style.width = "100%";
        }
        
        /* Close when someone clicks on the "x" symbol inside the overlay */
        function closeNav() {
            document.getElementById("myNav").style.width = "0%";
        }
      </script>
      <header>
        <div id="menu_div" onclick="openNav()">
         <img src="img/menuicon.png">
        </div>
        <nav>
          <ul>
           <li><a href="index.html" class="selected">Home</a></li>
           <li><a href="about.html">About</a></li>
           <li><a href="media.html">Media</a></li>
           <li><a href="dates.html">Dates</a></li>
           <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>
          <div id="logodiv">
              <img src="img/freshtracklogo.jpg" alt"freshtracklogo" id="freshtracklogo">
          </div>
      </header>
      <section>
        <form name="contactform" method="post" action="send_form_email.php">
          
          
          <label for="first_name">Name:</label>
          <input type="text" id="name" name="first_name">
          <label for="email">Email:</label>
          <input type="email" id="mail" name="email">
          <label for="comments">Message</label>
          <textarea id="comments" name="comments"></textarea>
        
          <button type="submit" value="submit" id="submit_button">Send</button>
        </form>
      </section>
      <p></p>
    </div>  
      <footer>
        <div id="socialdivfooter">
          <a href="https://www.facebook.com/freshtracktothebrain/?ref=aymt_homepage_panel" target="_blank">
            <img src="img/facebookicon.png" alt"Facebook Logo" class="social-icon">
          </a>
          <a href="https://www.instagram.com/freshtrackmusic/" target="_blank">
            <img src="img/instagramicon.png" alt"Instagram Logo" class="social-icon">
          </a>
          <a href="https://www.youtube.com/watch?v=9Ii3NoOhZDQ" target="_blank">
            <img src="img/youtubeicon.png" alt"Youtube Logo" class="social-icon">
          </a>
          <iframe id="bandsintowntrackerfooter"  src="http://www.bandsintown.com/artist/Passion%20Pit/track_button?size=small&display_tracker_count=false&text_color=%23FFFFFF&background_color=black" height="24" width="89" scrolling="no" frameborder="0" style="border:none"; overflow:hidden; allowtransparency="true"></iframe>
        </div>
        <p>&copy; 2016 Fresh Track</p>
      </footer>
    </div>  
  </body>  
</html>


/*************************************
General
*************************************/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
.clearfix {
    display: block;
}

body {
  font-family: 'Open sans', sans-serif;
  background-image: url(../img/gplaypattern.png);
 
}




a {
  text-decoration: none;
  color: black;
}


img {
  max-width: 100%;
}


p {
  margin: 0;
}


header {
  display: block;
}


/*************************************
Nav
*************************************/

nav {
  display: none;
}

#menu_div {
  width: 10%;
  height: auto;
  background: white;
  display: inline-block;
  margin-bottom: 0;
}


/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */    
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}

/*************************************
Header
*************************************/

header {
  width: 100%;
  margin: 0 0 20px 0;
  padding: 0;
  float: left;
  background: white;
  position: relative;

}


#logodiv {
  display: block;
  width: 75%;
  margin: 0 auto;
}

#freshtracklogo {
  margin: 0 auto;
  display: block;
}





/*************************************
Photo Gallery
*************************************/

#photo-gallery {
  list-style: none;
  margin: 0;
  padding: 0;
}

#photogallerywrapper {
  float: left;
  margin-bottom: 20px;
  margin-top: 0;
}

#photo-gallery li {
  float: left;
  width: 45%;
  height: auto;
  margin: 0 2.5% 15px 2.5%;
}

#photo-gallery p {
  text-align: center;
  Font-size: .5em;
  font-weight: 200;
}

.media-section {
  clear: both;
  text-align: center;
  font-size: 3rem;
  font-weight: 600;
  margin-bottom: 20px;
  font-family: 'Candl', sans-serif;
}






/*************************************
Video Gallery
*************************************/

#video-gallery {
  list-style: none;
  margin: 0 auto;
  padding: 0;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  margin-bottom: 20px;
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}





/*************************************
Dates Page
*************************************/


.boxed {
  position: relative;
  border-style: solid;
  border-width: 5px;
  background: #333738;
  margin: 0 auto;
}

.boxed p {
  color: white;
}

.date {
  margin: 0 auto;
  width: 135px;
  height: 95px;
  text-align: center;
  font-weight: 700;
  background: #5fcf80;
  border-radius: 3px;
}

.date p {
  color: white;
}
  
#day {
  font-family: 'Plaster', sans-serif;
  font-size: 2.5em;
}

#month, #year {
  font-family: 'Candal', sans-serif;
}

.venue, .location, .eventbutton {
  text-align: center;
  display: block;
}

.venue {
  margin: 10px 0;
  font-size: 2em;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-weight: 700;

}

.location {
  margin: 10px 0;
  font-size: 1.5em;
  font-family: 'Yanone Kaffeesatz', sans-serif;
}

.eventbutton {
  margin: 10px auto;
  background: #5fcf80;
  width: 120px;
  height: 50px;
  line-height: 50px;
  border-radius: 3px;
}

.eventbutton span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  font-family: 'Holtwood One SC', sans-serif;
  color: white;
  font-size: .9em;
}

.eventbutton a {
  display: block;
}


.gigdivider {
  margin: 0;
}





/*************************************
About Page
*************************************/

#band-description {
  text-align: center;
  font-family: 'Passion One', sans-serif;
  margin: 0 2%;
  line-height: 1.5;
  
}


.bio {
  margin: 0 auto;
}

.bio-pics {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
}


.band-players h2 {
  text-align: center;
  font-family: 'Candal', sans-serif;
}

.band-players h1 {
  font-family: 'Passion One', sans-serif;
  font-size: 3rem;
  font-weight: 600;
  margin-bottom: 60px;
}












/*************************************
Contact Page
*************************************/




* {
  box-sizing: border-box;
}

form {
  background: #E6E9EB;
  width: 80%;
  margin: 0 auto;
  border-radius: 7px;
  font-family: 'Candal', sans-serif;
  display: block;
  padding: 0;
}


  

input, textarea, button {
  display: block;
  margin: 0 auto 20px auto;
  border: none;
}

input, textarea {
  width: 80%;
  border-radius: 6px;
  background-color: #CACBCC;
}

input {
  height: 30px;
}

label{
  margin-left: 10%;
  display: block;
  padding-bottom: 10px
}

textarea {
  resize: none;
  height: 90px;
}

button {
  width: 100px;
  height: 40px;
  font-family: 'Candal', sans-serif;
  color: white;
  font-size: 1.3em;
  background-color: #5fcf80;
  border-radius: 10px;
  margin-top: 50px;
  margin-bottom: 20px;
}

form p {
  display: block;
  height: 10px;
}



/*************************************
Footer
*************************************/

footer {
  opacity: .8;
  width: 100%;
  padding: 3px 0 0 0;
  text-align: center;
  clear: both;
  display: block;
  background: white;
  position: fixed;
  bottom: 0;
}



#bandsintowntracker {
  display: block;
}

#bandsintowntrackerfooter {
  margin: 0 auto 5px auto;
  display: block;
}

.social-icon {
  width: 26px;
  height: 26px;
  margin: 0 1px 0 0;
  padding: 0;
}








/*************************************
FONTS AND COLORS
*************************************/

.media-section {
  font-family: 'Passion One', sans-serif;
}

#main-nav li a {
  font-family: 'Candal', sans-serif;
  font-size: 1.5em;
  font-weight: 600;
}

h1 {
  font-family: 'Candal', sans-serif;
}

#booking {
  font-family: 'Candal', sans-serif;
}

footer {
  background: #3B4042;
}
 



/*************************************
Hover effects photo gallery
*************************************/

.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}



#2

i would personally always add a div element after a float:

</header>
<div class="clear"></div>

css:

.clear { clear: both; }

and use clear: both. The problem with float is that it takes the element out of normal document flow, with clear we can restore this

the alternative solution, make your form relative and give it a top instead of a margin-top, but the first solution is easier given you restore document flow


#3

Great! That solved my problem. Thank you!