László Vaszi László Vaszi - 6 months ago 15
HTML Question

#services div has content but appears as empty div

My #services div has content wrapped inside, but when I wanna give display it's borders or give it a background, it appears as an empty div. What's the trick here? Looks like it works well in the snippet, but here is the way it appears: http://laszlovaszi.com/yoursite/ .Thanks in advance!



#services {
border:1px solid red;
margin-top:50px;
background-color:#f1eee9;
}

#services p {
margin-top:25px;
}

.separator2 {
width: 100%;
margin: 20px auto 15px;
position: relative;
height: 1px;
background-color:#d3d3d3;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div id="services">
<div class="col-sm-8 col-sm-offset-2 text-center">
<div class="row">
<h1>Our Team</h1>
<div class="separator2"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="col-md-4 service">
<div class="img-responsive">
<img src="photos/service.jpeg" alt="Service">
</div>
<div class="service_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="col-md-4 service">
<div class="img-responsive">
<img src="photos/service.jpeg" alt="Service">
</div>
<div class="service_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="col-md-4 service">
<div class="img-responsive">
<img src="photos/service.jpeg" alt="Service">
</div>
<div class="service_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</row>
</div>
</div>




Answer

After correcting your markup (amending the </row> tag to a </div>), I noticed your wrapping #services div appears to be collapsing due to its floated children. Add a clearfix class to it as below:

#services {
	border:1px solid red;
	margin-top:50px;
	background-color:#f1eee9;
}

#services p {
	margin-top:25px;
}

.separator2 {
    width: 100%;
    margin: 20px auto 15px;
    position: relative;
    height: 1px;
	background-color:#d3d3d3;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div id="services" class="cf">
  <div class="col-sm-8 col-sm-offset-2 text-center">
    <div class="row">
      <h1>Our Team</h1>
      <div class="separator2"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <div class="col-md-4 service">
        <div class="img-responsive">
          <img src="photos/service.jpeg" alt="Service">
        </div>
        <div class="service_description">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
      <div class="col-md-4 service">
        <div class="img-responsive">
          <img src="photos/service.jpeg" alt="Service">
        </div>
        <div class="service_description">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
      <div class="col-md-4 service">
        <div class="img-responsive">
          <img src="photos/service.jpeg" alt="Service">
        </div>
        <div class="service_description">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
      </div>
  </div>
</div>

You'll notice now, the #services div has its height reinstated (before it just had a 2px height due to the border).

Clearfix micro hack: http://nicolasgallagher.com/micro-clearfix-hack/

More info: What is clearfix?

Comments