CODEWITHSUNDEEP
htmlcss
HiFi
HiFi

Reputation: 21

Div inside div absolute positioning and negative margin overlaps content

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
}

Upvotes: 1

Views: 399

Answers (3)

GiorgosK
GiorgosK

Reputation: 8299

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/

Upvotes: 0

Harriet
Harriet

Reputation: 1713

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.

Upvotes: 0

Jishnu V S
Jishnu V S

Reputation: 8409

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>

Upvotes: 1

Related Questions