How to use CSS to make a child element's width automatically fill the width of its

Is there a way to make the child div info fill the parent div video-featured width while remaining absolute, allowing it to overlap the parent div without using a fixed width?

<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>

View the issue on this fiddle https://jsfiddle.net/3w73t9yn/. The following images demonstrate the problem:

css

Answer №1

  1. All elements have been set to box-sizing: border-box; for the purpose of allowing elements to be both 100% wide and have padding applied.
  2. The fixed height previously set on video has been removed to allow the 100% value to fill the container completely.
  3. .info is now a child element of .video.
  4. .video now has relative positioning, providing a proper context for the absolute positioning of its new child element .info.

* {
  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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to remove strings within HTML elements?

{% for term in terms %} <div class="term term-count-{{loop.index}}"> <b>{{ term }}</b>: &nbsp;&nbsp; {{ terms[term] }} &nbsp;&nbsp; </div> {% endfor %} 'terms' is a dictionary w ...

pythonhtmlcssflaskjinja2

Automatically change a text based on its location

Currently leveraging the amazing flexible-nav to showcase the current subtopic within my post. I am also considering the possibility of extracting this current-string and showcasing it at the top of the page in my main navigation bar. This way, the text w ...

javascripthtmlcss

Change the width of the webpage inside the iframe

I am working with an iframe that has a fixed width and height of 400px. I want to load a web page in the iframe, but I need to adjust the width of the source to fit my iframe perfectly. The height is not an issue as I can add a scrollbar if needed. Here ...

javascriptjqueryhtmlcssiframe

Creating a responsive table layout with CSS

I currently have the following code: .fiftyFiftySection { background-color: #000; } .odometer { font-size: 3em; text-align: center; } table td { column-width: 1000px; text-align: center; } @media (max-width: 500px) { table td { column ...

htmlcss

Applying Compiled CSS file in Node.js using Express and SASS not working as expected

Recently, I've delved into utilizing NodeJS with Express to serve my pug files. In addition, I decided to incorporate the "express-sass-middleware" to compile and serve the scss/css files in my project. While everything seems to be functioning as expe ...

cssnode.jsexpresssasspug

Modify the animation on Material UI Autocomplete with an underline effect

In my project, I am utilizing a Material UI Autocomplete component for the "Faculdade" field. Nonetheless, I have observed that the animation/transition effect when this component is focused involves spreading from the middle outwards. I desire the animati ...

cssreactjsanimationautocompletematerial-ui

The hover effect is being applied exclusively to the final React component

When using next.js and tailwindCSS for styling, I created a custom component that includes tags. The issue arises when multiple instances of this component are placed on the page, as only the last one is getting the desired hover effect. "index.js" import ...

cssreactjsnext.jshover

Using Angular to create a nested routerLink within a routerLink

Is there a way to dynamically change the content of a page loaded using router link without duplicating the HTML code for the header and footer sections each time? I want to navigate between different pages with routerLink and have only the main content ar ...

htmlcssangularangular-routing

Ensure tables are vertically centered when printing an HTML page

I need to export two tables, each measuring 7cm×15cm, to a PDF file with A4 portrait paper size using the browser's "Save to PDF" option in the print tool. My goal is to center these two tables vertically on the A4 paper. If that proves difficult, I ...

htmlcssprinting

What is the method for creating a curved CSS Pseudo element background?

Currently, I have implemented a red pseudo element as part of the background for certain sections on my website. Although everything is functioning correctly, I am interested in transitioning the straight line to a curved one instead. Does anyone know ho ...

csspseudo-element

Animating CSS Pixel Fragments

After applying a simple CSS animation that moves size and box shadows from one side of the screen to the other, I am noticing residual pixel fragments left behind. To see this issue in action on Chrome 66, check out the Code Pen: Is there a way to remove ...

javascripthtmlcssanimation

What steps should I take to eliminate the gap in my fixed bottom navbar?

I'm looking to revamp my menu layout by aligning the links with the social media icons and home button on the same line. The links are nested inside a div within the main navbar class (streetworn-demos), while the social media icons and homepage butt ...

htmlcss

Guide on adding a parent class to style all generated CSS rules in styled-components 5.3.5

When my application loads into a parent div with a specific class (for example, .my-app), is there a way to add the prefix .my-app to all classes generated by styled-components? For instance, consider a component like this: import React from 'react& ...

cssreactjsbabeljsstyled-components

What is the best way to choose the first parent element that includes a specific class within it?

I am searching for a method to identify the initial parent element that includes another element with a specified class within it. For instance: <div class="wrapper"> <div class="item"> <div class="inner-eleme ...

css

The submenu is not aligned directly under its parent item

The sub-menu is not appearing below the parent item as expected. I have tried removing and adding the 'absolute' property, but it doesn't seem to have any effect. Check out the JS Fiddle for reference: http://jsfiddle.net/42qg5/ HTML Code ...

htmlcss

Is jQuery the key to Masonry's stacking magic?

Hey there, I could really use some assistance with my website at this link: I thought jQuery Masonry would stack the objects closely together, but when I randomize the div boxes, there are large gaps between them. Can anyone explain why this is happening? ...

phpjquerycsswordpress

Shades of Grey in Visual Studio Code

Whenever I use VSC, I notice these odd grey boxes that appear in my editor. They seem to be dynamic and really bother me. Interestingly, switching to a light theme makes them disappear. However, I prefer using a dark theme and haven't been able to fin ...

csslayoutvisual-studio-code

When the class name is identical, the click event appears to be malfunctioning

Why isn't the click event working in this code? What am I doing wrong? $(document).ready(function() { $('.dashboardList').click(function() { alert("hello"); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1. ...

javascriptjqueryhtmlcss

What is the method to set an element's height equivalent to the height of the entire screen?

I attempted using height: auto;, however, it did not produce the desired outcome. Do you have any suggestions or alternative solutions? ...

htmlcss

Contrasting Firefox Experience on Mac and Windows

I'm experiencing some issues with a website that is displaying differently in Firefox on Windows compared to Mac. I did some research online to see if there are any known differences in CSS rendering between the two versions of Firefox, but it doesn&a ...

cssfirefoxrendering