What is the best way to ensure that an absolutely positioned div expands to fill all available width space?

I'm trying to position a transparent div at the bottom of a wide image using absolute positioning.


<div class="background">

 <img src="background.jpg" class="image">
 <div class="box">
  <p>paragraph</p>
 </div>

 </div>

Here is the CSS:


.background {
 Position: relative;
 }

.image {
 width: 100%;
 display: block;
 }

.box {
 background: #CC333F;
 color: white;
 position: absolute;
 bottom: 0;
 }

The issue is that the .box seems to be displaying as inline-block instead of taking the full width available on the page. It stops right where the paragraph ends.

Answer №1

Update the .box class with the following properties:

.box {
 background: #CC333F;
 color: white;
 position: absolute;
 bottom: 0;
 right:0;   /* include this line */
 left:0;    /* include this line */
 }

Answer №2

Another option is to include width:100%; in your CSS code:

.box {
 background-color: #CC333F;
 color: white;
 position: absolute;
 bottom: 0;
 width:100%;
 }

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

What is the best way to align two divs horizontally using CSS?

.navbar { overflow: hidden; background-color: antiquewhite; position: absolute; top: 0; width: 100%; } .navbar a { float: right; display: block; color: Black; text-align: center; padding: 14px 16px; text-decoration: none; font-size ...

Using jquery and css to allow hover effects and modify the color of active tabs

I need to modify the appearance of a tab in my left navigation menu so that it changes color when hovered over and remains that color when selected. I have limited experience with jQuery and CSS, so any guidance would be greatly appreciated! Below is the ...

Tips for extracting text with selenium

I'm struggling to extract the address of this website using selenium: page My attempt to do so was with the following code: address = driver.find_element_by_css_selector('main-content-cell.p-bottom').text print(address) Unfortunately, wh ...

How do I use jQuery to remove a dynamically added class from the page's header?

When using an inline editor to modify css classes, I encounter the need to remove and then re-add a class definition after making changes. Additionally, users have the option to delete elements, so it's important that the definition is also deleted. ...

The issue of elements flickering while being hidden and shown with jQuery has been observed in both Chrome and

Having trouble with a simple animation using jQuery? While it may work smoothly in Firefox, you might be experiencing flickering in Chrome and Edge. Check out this jsfiddle for reference: HTML <div id="boxes-wrapper"> <div class="box"></ ...

"Encountering an issue when trying to choose a value from a select list using jQuery and the

What am I missing here or what is the correct approach to solve this? Take a look at the following code snippet: code snippet $(document).ready(function() { $(".metric_div").hide(); $("#solid_radio").click(function() { $("#solid").show(); ...

It seems like there may be an issue with the React Table Pagination in reactjs

As a newcomer to React JS, I have been utilizing react-table to create a component that can filter, sort, and paginate sample data from a JSON file. If you are interested in the tutorial I am following, you can find it here: Currently, I am encountering ...

pass user identification by using a link using php and MySQL

In my table of items, there is an option for users to delete or restore each item, using a special PHP file called 'delete.php'. print "<td>"; if ($row['deleted'] == 'y') { print "<a href='delete.php?id=2'& ...

Tips for creating space between a label and radio button in Bootstrap 4

I attempted to use this solution as suggested, but unfortunately, it did not yield the desired results. I seek advice on how to achieve the intended outcome. <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="s ...

Experiencing trouble with implementing multiple textboxes based on option selection using javascript

My JavaScript code is supposed to display multiple textboxes based on the user's selection, but for some reason, I can only select one textbox at a time. I'm not sure what's wrong with my code. Here's the snippet of the code: <ht ...

This JavaScript code is configured to only display content on half of the page

Has anyone experienced issues printing a full element (body) using the jquery plugin https://github.com/jasonday/printThis? I have only been able to print half of the element vertically. I also tried using raw javascript with window.print(); but encountere ...

Add text to the forefront of video content while in fullscreen mode

Currently, I am facing an issue while trying to embed a video from YouTube. I am unable to draw anything (text, image, etc.) when the video is in fullscreen mode. Despite my attempts to use z-index, it has not been successful. My goal is to create a n ...

Having difficulties with Smooth Div Scroll and Colorbox integration

Check out the gallery page by following this link: http://www.gerardtonti.com/Scrollable%20Gallery%2/index.html After trying numerous methods, I am still facing the same issue. Upon discovering your jQuery Smooth Div Scroll tool online, I intend to contr ...

Creating a personalized image resizing function for WordPress

I have implemented the following code in functions.php to fetch the first image from WordPress posts: function grab_first_image() { global $post, $posts; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/< ...

Issue encountered when attempting to develop a countdown timer using Typescript

I am currently working on a countdown timer using Typescript that includes setting an alarm. I have managed to receive input from the time attribute, converted it using .getTime(), subtracted the current .getTime(), and displayed the result in the consol ...

Tips for refreshing the default style of Material UI select

I'm having trouble customizing the default background color of the first menuItem in the select component. The class I need is not visible when inspecting the element, as the background color disappears upon inspection. Steps to reproduce: 1. Click ...

Using JavaScript to control the state of a button: enable or

In the process of creating a basic HTML application to collect customer information and store it in a database, I have encountered a specific user interface challenge. Once the user logs into their profile, they should see three buttons. Button 1 = Print ...

Updating radio button color upon selection in Boostrap

Looking to customize the colors of radio buttons found on this Bootstrap page By default, the background color is white and changes to blue when clicked. <div class="btn-group" role="group" aria-label="Basic radio toggle button ...

Issue with Bootstrap 5: Mobile Menu Failure to Expand

I’ve been struggling with this issue for days now. I’ve searched everywhere for a solution, but to no avail. That’s why I’m turning to the experts here for help :-) The problem I’m facing is that my mobile menu won’t open. Nothing happens when ...

Is it acceptable to debut a full-screen iframe widget compared to an embedded one?

My current project involves integrating a custom widget into users' websites for my application. I am considering using an iframe as it seems to be the most efficient option for several reasons: Utilizing the custom framework of the application will ...