0

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>
sklrboy
  • 441
  • 1
  • 6
  • 15
  • You have some html erorrs. Check here: https://validator.w3.org/nu/?doc=http%3A%2F%2Flaszlovaszi.com%2Fyoursite%2F. Fix them and it should work fine. – andreivictor May 13 '16 at 10:29
  • Right. Errors fixed, but still the div appears to be empty. However, I fidured it out that an overflow:hidden resolves the problem. What can be the reason for that, knowing that I didn't even set up any fixed sizes? – sklrboy May 13 '16 at 10:35

2 Answers2

1

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 a clearfix?

Community
  • 1
  • 1
David Wilkinson
  • 5,060
  • 1
  • 18
  • 32
  • Perfect. It might be a dumb question, but why does a div collapse due to it's floated children? I've realized that an overflow:hidden or a float:left resolves this problem too, but I cannot figure out whats the reason and why does all these help. Thanks! – sklrboy May 13 '16 at 10:42
  • 1
    @LászlóVaszi No worries. Floated elements are essentially removed from the normal "flow" of a web page. Hence why for example you can have an element in the DOM before one element, yet have it appear after that element (by floating right). Because of this type of behaivour, the parent they belong to technically has no height. A good article which explains it better than I ever could is: http://www.impressivewebs.com/clearing-floats-why-necessary/ – David Wilkinson May 13 '16 at 10:59
1

You need to use float property to achieve so

#services {
border:1px solid red;
margin-top:50px;
background-color:#f1eee9;
float:left;
width:100%:
}

Also you can add width attribute if you want to.

Rohit Kishore
  • 542
  • 5
  • 17