CODEWITHSUNDEEP
htmlcss
Becky
Becky

Reputation: 2289

Div not reacting to margin after a floated div

I have two main divs service-display-box and service-contact.

service-contact is not setting properly after service-display-box, which has floated divs inside of it.

Let me first state that I am using clear: both; after the floated div. In addition, service-contact is reading the margin, but it is starting it halfway into the service-display-box.

I am not sure what I am doing wrong. It works in the snippet, but not on my page.

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>
            </h2>
      <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>
    </div>
    <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

Upvotes: 1

Views: 85

Answers (4)

dippas
dippas

Reputation: 60553

Your issue is in the jQuery in this line:

$('#service'+item_number).show().siblings().hide();

Which making your <div class="clear"></div> to be styled as display:none due to be a siblling of your .service-item-box divs,

To fix this is saying that the divs with class .service-item-box are the only one to be affected, so will be like this:

$('#service'+item_number).show().siblings('.service-item-box').hide();

Upvotes: 1

Jonas Grumann
Jonas Grumann

Reputation: 10786

You're not clearing the floats correctly: The easiest way to expand an element with floated elements inside him is to add overflow: hidden;. So go ahead and give 

.service-item-box-img-container { 
     overflow: hidden;
}

Upvotes: 2

Mihai T
Mihai T

Reputation: 17687

hope i understood the question.

add { float:left;width:100%} to .service-contact and the margin will be calculated correctly

also add { float:left;width:100%} to .service-top

Upvotes: -1

Zachary Wand
Zachary Wand

Reputation: 366

Your div that was setting clear: both also has display: none which essentially renders it useless. Getting rid of the display: none moved the button down 225px for me

Upvotes: 1

Related Questions