我试图将一个图像浮动到现有div的右侧。
div具有背景颜色，并在其上方有文本和图像。
当我尝试将图像浮动到div的右侧时，图像显示div所在的位置，并且div上的所有文本和图像都被按下。
不确定为什么我无法将图片显示在div旁边。这是我的HTML和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">
<a href="index.html"><img src="resized-images-logo/logo-use.svg" alt="moby-dick-title" /></a>
</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><a href="whaling.html">Whaling</a></li>
<li><a href="planning.html">Planning</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="booktrip.html">Book Trip</a></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><a href="whaling.html">Whaling</a></li>
<li><a href="planning.html">Planning</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="booktrip.html">Book Trip</a></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-->