Floating images and divs - css

Question

I am trying to float one image to the right of an existing div.
The div has a background color and has text and images on top of it.
When I try to float the image to the right of the div, the image appears where the div was, and all the text and images on the div are pushed down.
Not sure why I can't get the image to appear next to the div. Here's my HTML and CSS.
#left-column-background {
width: 40%;
height: 750px;
background-color: #C16C43;
margin-left: 10%;
margin-bottom: 10%;
margin-right: 10%;
float: left;
}
#right-column-image {
background-image: url('resized-images-logo/about-resized.jpg');
background-repeat: no-repeat;
background-size: cover;
width: 40%;
height: 750px;
float: right;
}
#about-title {
color: #C16C43;
margin-top: 7%;
margin-bottom: 5%;
margin-left: 10%;
margin-right: 2%;
}
#mission-text {
margin-top: 5%;
margin-left: 12%;
margin-bottom: 5%;
width: 80%;
float: left;
}
#mission-button-large {
margin-top: 7%;
margin-left: 12%;
float: left;
}
#service-button-large {
margin-top: 12%;
margin-left: 12%;
}
#service-text {
margin-top: 5%;
margin-bottom: 5%;
margin-left: 12%;
width: 80%;
}
#values-button-large {
margin-top: 7%;
margin-left: 12%;
}
#values-button-text {
margin-top: 5%;
margin-bottom: 5%;
margin-left: 12%;
width: 80%;
}
#mission-button-medium {
display: none;
margin-top: 7%;
margin-left: 12%;
float: left;
}
#service-button-medium {
display: none;
margin-top: 12%;
margin-left: 12%;
}
#service-button-small {
margin-top: 12%;
margin-left: 12%;
display: none;
}
#values-button-medium {
margin-top: 7%;
margin-left: 12%;
display: none;
}
#mission-button-small {
margin-top: 7%;
margin-left: 12%;
float: left;
display: none;
}
#values-button-small {
margin-top: 7%;
margin-left: 12%;
display: none;
}
<div class="wrapper">
<header>
<div id="logo">
<img src="resized-images-logo/logo-use.svg" alt="moby-dick-title" />
</div>
<!--end logo and title-->
<div id="hamburger-nav-large">
<a href="#mobile-footer-nav"><img src="icons-use/hamburger-menu-
large.png" alt="hamburger menu" /></a>
</div>
<!--end of hamburger-nav-large-->
<div id="hamburger-nav-small">
<a href="#mobile-footer-nav"><img src="icons-use/hamburger-menu-
small.png" alt="hamburger menu" /></a>
</div>
<!--end of hamburger-nav-small-->
<div id="hamburger-nav-tiny">
<a href="#mobile-footer-nav"><img src="icons-use/hamburger-menu-
tiny.png" alt="hamburger menu" /></a>
</div>
<!--end hamburger-nav-tiny-->
<div id="nav">
<ul>
<li>Whaling</li>
<li>Planning</li>
<li>About</li>
<li>Contact</li>
<li>Book Trip</li>
</ul>
</div>
<!--end of nav-->
</header>
<!--end of header-->
<main>
<div id="about-title">
<h2>About Us</h2>
</div>
<!--end of about-
title-->
<div id="left-column-background">
<div id="right-column-image"></div>
<!--end right-column-image-->
<div id="mission-button-large"><img src="resized-images-
logo/mission-button-large.svg" />
</div>
<!--end mission-button-large-->
<div id="mission-button-medium"><img src="resized-images-
logo/mission-button-medium.svg" />
</div>
<!--end mission-button-medium-->
<div id="mission-button-small"><img src="resized-images-
logo/mission-button-small.svg" />
</div>
<!--end mission-button-small-->
<div id="mission-text">We were established with one goal in mind, to provide the best whale watching experience to our customers. We are comprised of a team of passionate marine biologists eager to share our experiences and knowledge. </div>
<!--end mission-text-->
<div id="service-button-large"><img src="resized-images-
logo/service-button-large.svg" /></div>
<!--end service-button-large-->
<div id="service-button-medium"><img src="resized-images-
logo/service-button-medium.svg" /></div>
<!--end service-button-medium-->
<div id="service-button-small"><img src="resized-images-
logo/service-button-small.svg" /></div>
<!--end service-button-small-->
<div id="service-text">
Our service mantra is to give you the knowledge to truly enjoy the whale watching experience. Through reading material, video, live talks and demonstrations, we provide plenty of time to ask questions and explain what you are seeing.
</div>
<!--end service-text-->
<div id="values-button-large">
<img src="resized-images-logo/values-button-large.svg" />
</div>
<!--end values-button-large-->
<div id="values-button-medium">
<img src="resized-images-logo/values-button-medium.svg" />
</div>
<!--end values-button-medium-->
<div id="values-button-small">
<img src="resized-images-logo/values-button-small.svg" />
</div>
<!--end values-button-small-->
<div id="values-button-text">
All the folks at Moby-Dick Whaling Adventures are active environmentalists. We have experience documenting many of the challenges our planet faces. We feel that the best way to save our planet is to show it off.
</div>
<!--end values-button-text-->
</div>
<!--end left-column-background-->
<div class="clearfix"></div>
<!--end clearfix-->
</main>
<!--end of main-->
<div id="mobile-footer-nav">
<ul>
<li>Whaling</li>
<li>Planning</li>
<li>About</li>
<li>Contact</li>
<li>Book Trip</li>
</ul>
</div>
<!--end of mobile-footer-nav-->
<footer>
<div id="left-column-footer">
<p>Moby-Dick Whaling Adventures</p>
<table>
<tr>
<td><img src="icons-use/phone.svg" alt="phone-icon" /></td>
<td>888-888-8888</td>
</tr>
<tr>
<td><img src="icons-use/67-email.svg" alt="email-icon" />
</td>
<td>info#mobydick.com</td>
</tr>
</table>
<p>123 Whaling Ave<br/> Whaleport, MA 02934</p>
</div>
<!--end left-column-->
<div id="center-column-footer">
<p>Comprehensive, professional tours. Custom tailored to create maximum excitement.
</p>
</div>
<!--end of center-column-->
<div id="right-column-footer">
<div id="social-icons">
<img src="icons-use/instagram-white.svg" alt="instagram-icon" />
<img src="icons-use/06-facebook.svg" alt="facebook-icon" />
<img src="icons-use/twitter.svg" alt="twitter-icon" />
</div>
<!--end social-icons-->
<div id="small-social-icons">
<img src="icons-use/instagram-white-small.svg" alt="instagram-
icon" />
<img src="icons-use/06-facebook-small.svg" alt="facebook-
icon" />
<img src="icons-use/twitter-small.svg" alt="twitter-icon" />
</div>
<!--end small-social-icons-->
<div id="copyright-text">
<p>© 2017 Moby-Dick Whaling Adventures</p>
</div>
<!--end of copyright-text-icons-->
</div>
<!--end right-column-->
<div class="clearfix"></div>
</footer>
<!--end of footer text-->
</div>
<!--end of wrapper-->