Div inside div absolute positioning and negative margin overlaps content

Question

I have a div inside another div and the effect that I'd like to achieve is the classic three products icons next to each other with some explanatory text underneath.

The content of a the text div doesn't push down the following content and overlaps it. I've tried many different solutions but i didn't find anything that works in this case.

I'm afraid that the absolute positioning and negative margin of the inner div makes it harder.

I would appreciate any suggestions. Thanks!

HTML

    <div class="icon-group">
        <div class="icon">
          <i class="fa fa-book fa-4x" aria-hidden="true"></i>
          <div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
        </div>
        <div class="icon">
          <i class="fa fa-plane fa-4x" aria-hidden="true"></i>
          <div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
        </div>
        <div class="icon">
          <i class="fa fa-quote-right fa-4x" aria-hidden="true"></i>
          <div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
        </div>
      </div>
   <div class="clear"></div>
   <h3 class="after-icons">What people say about me</h3>

CSS

.icon-group, icon-caption-group {
  height: 100px; display: table; width:100%; table-layout: fixed}
.icon, .icon-caption {
  display: table-cell; 
  text-align: center; 
  vertical-align: middle; 
  position: relative;}

.icon-caption {
  border-bottom: 3px solid #E8EAF6; 
  vertical-align: middle; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  width: 50%; 
  margin: -15% 0 0 -25%; 
  margin-top: 20%;
}

.after-icons {
  margin-top: 30px
}

score 1 · Accepted Answer · answered Feb 06 '17 at 06:49

You don't need to positioning the content you can simply do like this way, check with the below snippet

.icon-group, icon-caption-group {height: 100px; display: table; width:100%; table-layout: fixed}
.icon, .icon-caption {
display: table-cell; 
text-align: center; 
vertical-align: middle; 
position: relative;}

.icon-caption {
border-bottom: 3px solid #E8EAF6; 
vertical-align: middle; 
display: block;
margin: 0 auto;
width: 50%; 
}

.after-icons {
margin-top: 30px
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="icon-group">
        <div class="icon">
          <i class="fa fa-book fa-4x" aria-hidden="true"></i>
          <div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
        </div>
        <div class="icon">
          <i class="fa fa-plane fa-4x" aria-hidden="true"></i>
          <div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
        </div>
        <div class="icon">
          <i class="fa fa-quote-right fa-4x" aria-hidden="true"></i>
          <div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
        </div>
      </div>
   <div class="clear"></div>
   <h3 class="after-icons">What people say about me</h3>

score 0 · Answer 2 · answered Feb 06 '17 at 06:50

0

How about increasing the top margin of the after-icons class? I've increased it to 130, and this pushes the text below the div.

answered Feb 06 '17 at 06:50

Harriet

1,633
5
22
36

score 0 · Answer 3 · edited May 23 '17 at 12:33

Your css leads to a very difficult situation of trying to expand the parent (icon class) based on an the size of an absolute positioned child which is better avoided Make absolute positioned div expand parent div height

keep you html markup the same and erasing your clear div and your css becomes very simple

All you need to do is apply padding or margin to icon class to space the icons

.icon {
  float: left;
  width: 33%;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="icon-group">
        <div class="icon clearfix">
          <i class="fa fa-book fa-4x" aria-hidden="true"></i>
          <div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
        </div>
        <div class="icon clearfix">
          <i class="fa fa-plane fa-4x" aria-hidden="true"></i>
          <div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
        </div>
        <div class="icon clearfix">
          <i class="fa fa-quote-right fa-4x" aria-hidden="true"></i>
          <div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
        </div>
      </div>
   <h3 class="after-icons">What people say about me</h3>

NOTE: clearfix is usually needed for older browsers and I chose the simplest implementation of it but if you want to support very old browsers do a search for clearfix

Here is a working jsfiddle https://jsfiddle.net/GiorgosK/x3evnxpn/

Div inside div absolute positioning and negative margin overlaps content

3 Answers3