Becky Becky - 1 year ago 35
CSS Question

Div not reacting to margin after a floated div

I have two main divs

is not setting properly after
, which has floated divs inside of it. Let me first state that I am using
clear: both;
after the floated div. In addition,
is reading the margin, but it is starting it halfway into the
. I am not sure what I am doing wrong. It works in the snippet, but not on my page. Here is the page: click here. When you get to the page, scroll down and click on one of the service tabs. Then once it scrolls you down, scroll down until you see the button that says "CONTACT US". It should be much further down than it is because I have the
margin-top: 225;

What am I doing wrong?

#service-display-box {
background: #FFF;
color: #000;
width: 100%;
padding: 15px 0;
#service-display-box-container {
padding: 135px 15%;
.service-item-box-img-container {
width: 80%;
margin: 50px 10%;
.service-item-box-img {
margin: 50px 0;
width: 40%;
height: auto;
vertical-align: top;
box-shadow: 8px 8px 4px #BEBEBE;
.service-item-box-img.left {
float: left;
.service-item-box-img.right {
float: right;
#service-contact {
margin: 225px auto 75px auto;
text-align: center;
clear: both;
#service-contact a {
text-decoration: none;

#service-contact-button {
border: 1px solid #578570;
background: #578570;
color: #FFF;
padding: 20px 40px;
font-size: 1.5em;
transition: 0.4s ease;
-webkit-transition: 0.4s ease;

<div id="service-display-box">
<div id="service-display-box-container">
<div class="service-item-box" id="service1">
<h1 class="service-item-title">DEMOLITION</h1>
<h2 class="service-item-description">
<p>We continues to build a strong legacy in the dismantlement industry because of our proven ability to complete projects ranging in nearly any size”</p>
<p>We have played a valuable role in the demolition of numerous industrial facilities throughout the region including chemical, steel mills, energy generation, tire, and automotive. These structures demand skillful understanding along with proper tools and equipment to be safely brought down.</p>
<p>Commercial demolition is essential in the redevelopment process. The region has allowed us to complete numerous commercial projects. We are able to perform interior, selective, and full demolition services to our clients.</p>
<p>Residential demolition is a fundamental ability. We provides turnkey services to the public, the government, and development entities.</p>
<div class="service-item-box-img-container">
<img src="images/service/demo/demo1.jpg" alt="Eslich Wrecking Company Demolition and Wrecking Services" class="service-item-box-img left">
<img src="images/service/demo/demo2.jpg" alt="Eslich Wrecking Company Demolition and Wrecking Services" class="service-item-box-img right">
<div style="clear:both;"></div>
<div id="service-contact"><a href="contact"><span id="service-contact-button">CONTACT US</span></a></div>

enter image description here

Answer Source

your issue is in the jQuery in this line:


which making your <div class="clear"></div> to be styled as display:none, the fix for this is only saying that the divs with class .service-item-box are the only one to be affected., so will be like this: