CODEWITHSUNDEEP
css
Linesofcode
Linesofcode

Reputation: 5891

CSS make child width fill parent width - absolute position

I'm trying to make my child div info fill the parent div video-featured width, but also I need the child div to be absolute so it can overlap the parent div.

I have manage to accomplish this by using fixed width in child div however I don't want to use fixed width..is there any way to accomplish what I want?

<div class="video-featured col-md-4">
  <div class="video">
    <video name="media">
      <source src="https://fat.gfycat.com/QuerulousGrayGardensnake.webm" type="video/webm" />
    </video>
  </div>
  <div class="info">
    <h3 class="title">
      <a title="some random title">
        Some random text
      </a>
    </h3>
  </div>
</div>

Check on fiddle https://jsfiddle.net/3w73t9yn/ and the followng images illustrates the problem.

enter image description here

enter image description here

Upvotes: 0

Views: 3290

Answers (1)

Andy Hoffman
Andy Hoffman

Reputation: 19111

  1. I set every element to box-sizing: border-box;. This is so that we can do things like, "make this element 100% wide but also apply padding".
  2. Removing the fixed height you set on video lets the 100% value fill the entire container.
  3. I made .info a child of .video.
  4. I set relative positioning to .video, so that the new .info child has a proper context for absolute positioning.

* {
  box-sizing: border-box;
}

.video-featured
{
    outline: 0;
    position: relative;
}

video
{
    width: 100%;
}

.video {
  position: relative;
}

.info
{
    position: absolute;
    bottom: 0px;
    left: 0;
    height: 60px;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    opacity: 0.6;
    background-color: #484848;
}
<div class="video-featured col-md-4">
  <div class="video">
    <video name="media">
      <source src="https://fat.gfycat.com/QuerulousGrayGardensnake.webm" type="video/webm" />
    </video>
    
    <div class="info">
      <h3 class="title">
        <a title="some random title">
          Some random text
        </a>
      </h3>
    </div>    
  </div>
  
</div>

Upvotes: 2

Related Questions