B Johnson B Johnson - 4 months ago 17
HTML Question

float:right moves other divs down

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:

enter image description here



.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

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>