CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
katie hudson
katie hudson

Reputation: 2893

Margin on absolute element

I have searched around but none of the solutions seem to work for me. I essentially have some basic markup

<section id="testimonial" class="section">
  <div id="testimonial-container" class="testimonial-carousel white-back">

  </div>
  <div id="imageContainer" class="container">
    <div class="row">
      <div class="col-md-3 offset-6">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSyj8ojsALtvYLKCCAxYVuTu3oxP4CmmIfNlC__LvYg4MbPIyZq" class="btmImg">
      </div>
    </div>
  </div>
</section>

Now testimonial-container is simply a container for a testimonial slider. It has a min-height of 400px. The actual section has a height of 100vh.

The part I am struggling with is this. At the bottom of the section I am placing an image. Because I am giving it an absolute position, a margin-top will not impact the testimonal-container. I have set up a JSFiddle to demonstrate.

As you can see, the bottom image is sitting on top of the testimonial-container. Is there any way to give it a margin or something to stop this from happening?

Thanks

Design

So there is a section above this section which I did not include in the Fiddle. I am working on Section B, which has a min-height of 100vh. The white area is the testimonial-container, it slightly overlaps Section A, has a width of 400px, and sits in the middle. There is then an image located at the very bottom of the section.

Upvotes: 0

Views: 76

Answers (1)

pldg
pldg

Reputation: 2588

I've replicated the same situation of your image:

.section-A {
  background: lightgrey;
  height: 100vh;
}

.section-B {
  position: relative;
  background: brown;
  height: 100vh;
  min-height: 800px; /* if you remove min-height <img> will overlap .testimonal-container */
} .testimonial-container {
  min-height: 400px;
  width: 70%;
  background: white;
  position: absolute;
  top: -10%; /* increase to move up */
  left: 50%;
  transform: translateX(-50%);
} img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
<div class="section-A">
</div>

<div class="section-B">
  <div class="testimonial-container">
  </div>
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSyj8ojsALtvYLKCCAxYVuTu3oxP4CmmIfNlC__LvYg4MbPIyZq" />
</div>

Same code in jsfiddle: https://jsfiddle.net/z69w9u4g/28/

Note that left: 50%; transform: translateX(-50%); properties are used to horizontal centering the element, because you can't use margin-left: auto; margin-right: auto; on elements that has position: absolute;

Upvotes: 1

Related Questions