float:right moves other divs down

Question

I have a div (.contactquestion) inside of another div (.body) that is trying to float:right, but when I put float:right onto .contactquestion, it moves the .nav class (the heading in the picture) down around 100px. I have absolutely no idea why. This is most of my HTML, but not all of my CSS. If you need more, I'd be happy to provide.

Does the float property usually do this? Any help would be appreciated.

EDIT: Here's a Fiddle with everything. the central area will be a little messed up unless you stretch it, but that doesn't really matter at the moment. https://jsfiddle.net/BTJohnson/zo6132yL/

Here's a picture of the problem:

.body{
      width: 60%;
      top: 100px;
      position: relative;
      margin: 0 auto;
      height: 100%;
      background-color: #444;
      color: white;
    }

    .businessinquiry {
      float: left;
      width: 45%;
      border: 1px solid black;
      margin-left: 25px;
    }

    .contactquestion {
      width: 45%;
      background-color: #444;
      padding: 5px;
      opacity: .9;
      margin-bottom: 50px;
      border: 1px solid black;
      float: right;
      margin-right: 25px;
    }

	<div class="nav">
		<ul>
			<li class="home"><a href="BraxtonTJohnsonHome.html"><img src="../pics/Logo.png" width="50" height="50"></a></li>
			<li class="about"><a href="BraxtonTJohnsonAbout.html">About</a></li>
			<li class="mywork"><a href="BraxtonTJohnsonMyWork.html">My Work</a></li>
			<li class="contact"><a class="active" href="BraxtonTJohnsonContact.html">Contact</a></li>
		</ul>
	</div>

	<div class="body">
		<div class="businessinquiry">
			<h2>Business Inquiries</h2>
			<p>...</p>
			<p>...</p>
		</div>
		<div class="contactquestion">
			<div class="words">
				<h2>General Questions & Inquiries</h2>

			</div>
			<form method="post" action="../php/index.php">
        
    			<input class="info" name="name" placeholder="What's your name?">
            
    			<input class="info" name="email" type="email" placeholder="What's your email?">
            
    			<textarea class="message" name="message" placeholder="How can I help?"></textarea>
            
    			<input class="info" id="submit" name="submit" type="submit" value="Submit">
        
			</form>
		</div>
			<div class="social">

			</div>
	</div>

    

Answer 1

I gone through the JSfidle. Actually for the class .social you have given margin-top: 75px.

.social {

  padding: 20px;
  text-align: center;
  margin-top: 75px;
}

And the divs with classes .businessinquiry . contactquestion, .social are inside the div with class .body. But you have give float left and right to .businessinquiry . contactquestion. There is no floating property for .social.

To solve the problem you need to do the following things.

• Place .social out side .body div to resolve it .
• use clear:both property to cancel the floating property after the .contactquestion div.
• social you have given margin-top: 75px. Remove this

Answer 2

Need to add .fixit class to reset position of floating divs(.businessinquiry,.contactquestion) and remove margin-top: 75px off .social

.fixit:after{visibility:hidden;display:block;font-size:0;content:" ";clear:.req-a-quote input[type="submit"]both;height:0;}
.fixit{display:inline-block;clear:both;}
* html .fixit{height:1%;}
.fixit{display:block;}

body {
  margin: 0;
  padding: 0;
  background-image: url("../pics/nature.png");
  background-size: 150%;
  font-family: 'Lato', sans-serif;
}

.nav {
  opacity: .9;
}
 
.nav ul {
  list-style: none;
  background-color: #444;
  float: left;
  padding: 0;
  margin: 0;
  width: 100%;
}
.nav li {
  font-family: 'Lato', sans-serif;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #888;
  text-align: center;
}
 
.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}
 
.nav a:hover {
  background-color: #005f5f;
}
 
.nav a.active {
  background-color: #efefef;
  color: #444;
  cursor: default;
}

img {
  vertical-align: bottom;
}
 
@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.5em;
  }
 
  /* Option 1 - Display Inline */
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }
}

/* Centre the page */

.body{
  width: 60%;
  top: 100px;
  position: relative;
  margin: 0 auto;
  height: 100%;
  background-color: #444;
  color: white;
}

.businessinquiry {
  float: left;
  width: 45%;
  border: 1px solid black;
  margin-left: 25px;
}

.contactquestion {
  width: 45%;
  background-color: #444;
  padding: 5px;
  opacity: .9;
  margin-bottom: 50px;
  border: 1px solid black;
  margin-right: 25px;
  
  float: right;
}

/* Centre the form within the page */
form {
  margin:0 auto;
  text-align: center;
}

/* Style the text boxes */

input, textarea {
  height:30px;
  background:#444;
  border:1px solid white;
  padding:10px;
  font-size:1.2em;
  color:white;
  font-family: 'Lato', sans-serif;
}

input:focus, textarea:focus {
  border:1px solid white;
  color: white;
}

#submit {
  height: 50px;
  cursor: pointer;
  transition: .3s background-color;
  width: 9em;
  float: right;
  margin-right: 72px;
  margin-top: 6px;
  margin-bottom: 22px;
}

#submit:hover {
  background-color:#005f5f ;
}

.info[name="name"] {
  width: 8em;
  margin-right: 8px;
  margin-top: 22px;
}

.info[name='email'] {
  width: 8em;
  margin-left: 8px;
  margin-top: 22px;
}

.message {
  width: 350px;
  margin-top: 16px;
  margin-bottom: 16px;
  height: 100px;
  font-size: 1em;
}

.words {
  text-align: justify;
  color: #efefef;
  margin-left: 24px;
  margin-right: 24px;
}

.social {
  padding: 20px;
  text-align: center;
}

.social img {
  margin: 75px;
  opacity: .9;
  size: 25px;

}

	<div class="nav">
		<ul>
			<li class="home"><a href="BraxtonTJohnsonHome.html"><img src="../pics/Logo.png" width="50" height="50"></a></li>
			<li class="about"><a href="BraxtonTJohnsonAbout.html">About</a></li>
			<li class="mywork"><a href="BraxtonTJohnsonMyWork.html">My Work</a></li>
			<li class="contact"><a class="active" href="BraxtonTJohnsonContact.html">Contact</a></li>
		</ul>
	</div>

	<div class="body">
  <!-- .row start -->
  <div class="row fixit">
  
		<div class="businessinquiry">
			<h2>Business Inquiries</h2>
			<p>Interested in working together? Fill out the simple form below with some more information about your project, and I'll be in touch.</p>
			<p>Don't be afraid to be honest with us about your timeline and your budget. We're upfront about our prices, and knowing beforehand how we can best help you will really help later on.</p>
		</div>
		<div class="contactquestion">
			<div class="words">
				<h2>General Questions & Inquiries</h2>

			</div>
			<form method="post" action="../php/index.php">
        
    			<input class="info" name="name" placeholder="What's your name?">
            
    			<input class="info" name="email" type="email" placeholder="What's your email?">
            
    			<textarea class="message" name="message" placeholder="How can I help?"></textarea>
            
    			<input class="info" id="submit" name="submit" type="submit" value="Submit">
        
			</form>
    
		</div>
     </div><!-- .row end -->
     
			<div class="social">
				<a class="facebook" href="https://www.facebook.com/bjohnson.rbi"><img src="../pics/facebook.png"></a>
				<a class="twitter" href="https://twitter.com/braxtontjohnson"><img src="../pics/twitter.png"></a>
				<a class="instagram" href="https://www.instagram.com/b_rax_johnson/"><img src="../pics/instagram.png"></a>
				<a class="youtube" href="https://www.youtube.com/user/RBIproductions"><img src="../pics/youtube.png"></a>
			</div>
      
	</div>

Answer 3

Did you try adding ul{margin:0} to your css stylesheet? I think it has nothing to do with float.

And you have top:100px in .body class, you should also remove that.

Fiddle you provided doesnt really show any errors btw.