When a div element has a width of 100%, it may not truly be 100% if another div is positioned off the screen with absolute positioning

I am trying to create a background div that spans the full width of the page while other movable/floating divs are positioned absolutely.

Setting the width to 100% doesn't take into account that the .floater div is off-screen, causing scrollbars to appear.

Example of issue: https://jsfiddle.net/h0arax9o/2/

Scroll to the right in the preview. I want the purple background to cover the entire document.

html:

<div class="background"></div>
<div class="floater"></div>

css:

.background {
   background: purple;
   width: 100%;
   height: 100%;
   position: absolute;
}

.floater {
    background: red;
    width: 200px;
    height: 200px;
    left: 1400px;
    position: absolute;
}

Edit: To clarify, I want the background to span the entire page so that it behaves like an image when scrolling, moving along with the content.

I have updated the example to demonstrate this.

htmlcss

Answer №1

.wrapper {
    background: green;
    width: 100%;
    height: 100%;
    position:fixed;
}

.container {
    background: blue;
    width: 250px;
    height: 150px;
    left: 1200px;
    top: 300px;
    position:absolute;
}
<div class="wrapper"></div>
<div class="container"></div>

Answer №2

.background {
    background: purple;
    top: 0; right: 0; bottom: 0; left: 0;
    position: fixed;
}

.floater {
    background: red;
    width: 200px;
    height: 200px;
    left: 1400px;
    position: absolute;
}

Click here for the JSFiddle example.

Answer №3

To ensure consistent styling across different browsers, it is recommended to implement a CSS reset. You can find a useful CSS reset tool at the following link:

If you want to normalize your CSS settings in JSFiddle, simply click on the gear icon located at the top right corner of the CSS section. I have created a modified version of the JSFiddle with normalized CSS settings for your reference: https://jsfiddle.net/ckkoq3pn/

 _

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

Having trouble applying CSS styling to the div element

I'm new to CSS and struggling with aligning content within a div. Specifically, I can't get the actual price (striked off) to display next to the discounted price in the card - it keeps appearing underneath. Any ideas on how I can improve my CSS ...

htmlcssangular

What is the best way to display text in a pseudo element that extends over multiple lines?

I'm looking for a solution to hide certain parts of inline text (spoilers) that can be revealed when clicked. To accomplish this, I've added a pseudo element to the hidden text that displays additional text indicating it's a spoiler ('s ...

htmlcss

"Troubleshooting: When using the Script tag in EJS, conditional IF statements may not function

I encountered an issue here. I placed a script tag inside an IF conditional statement. However, the script tag runs whether the condition is TRUE or FALSE. For instance: <% if (info) { %> <p><%=info%></p> <scrip ...

javascripthtmlnode.jsexpressejs

Increase the height of the div to align with the height of the other div

Is there a way to use CSS to automatically adjust the height of both the right and left <div> elements so they fill the background-color based on the greater height, without setting a specific height for either? The left <div> can vary in heig ...

htmlcss

Adjust the background hue and opacity when incorporating a "modal div"

Currently, I have a page where a hidden div appears at some point to display a form for inputting data. This could be considered a modal div. My goal is to darken the rest of the page and only allow interaction with this specific div. I want the backgroun ...

javascriptjqueryhtmlcssmodal-dialog

Tips for identifying when a video's autoplay feature does not function properly on all web browsers

My search for the most optimal method to automatically play a video in the background led me to discover some interesting findings based on the latest data available. VVC/x266 - Versatile Video Coding: Offers significant reduction in data requirements wi ...

htmlcssfirefoxsafarisvelte

Using JQuery to adjust the image width to 100% when the height is greater than the width

Currently, I am working on developing a custom WordPress theme and here is the code snippet that I have been using: <div class="post-thumb"> <?php echo get_the_post_thumbnail(); ?> </div> I am facing an issue where I need to adjust the ...

javascriptjqueryhtmlcsswordpress

Position the text to the right of an image

Upon close observation of the page , you may notice that the 5th wine, AMARONE, has text wrapping around and under the bottle image. Is there a method to prevent this from occurring and instead have all the text on the right side without needing to create ...

css

The Chart feature in the ASP.NET WebHelpers Library

My goal was to incorporate a chart from the webhelpers library into my Visual Studio Webforms project. When I click the button, the chart should appear on the page. However, when I click the button, the chart takes over the entire page, causing the buttons ...

c#htmlasp.net

Creating a CSS container with a uniquely shaped rounded triangle/arrow design

I would like to create a container background with a rounded arrow design. The arrow should always stretch to the full width of the container and be able to adjust its height dynamically (I can use JavaScript if needed to adjust the height). Here's a ...

cssbackground

EaseSlide 'Basic Slideshow' created by Ameenullah Fails to Function

I'm trying to embed a carousel into my webpage. I copied the code from Bootsnips but have been unable to solve this issue with other solutions. This is my HTML Code: <div class="container"> <div class="row> <div class="col ...

jqueryhtmltwitter-bootstrapcarousel

Spin the div in the opposite direction after being clicked for the second time

After successfully using CSS and Javascript to rotate a div by 45 degrees upon clicking, I encountered an issue when trying to rotate it back to 0 degrees with a second click. Despite my searches for a solution, the div remains unresponsive. Any suggestion ...

javascriptjquerycss

How to find and pair up custom data attributes that are unfamiliar?

Is there a method to select elements with unspecified custom data attributes? When I say unspecified, I am referring to an element that could appear like this: <div data-unknown="foo"></div> or <td data-someOtherCustomDataAttribute="bar"& ...

htmlcsscss-selectors

How can I navigate to an anchor using hover?

I'm unsure if I can accomplish this task using just CSS and HTML or if I need to incorporate Javascript because my research did not yield much information on the subject. I have not attempted anything yet as I am uncertain about the approach I should ...

htmlcss

Can anyone recommend a super sleek drop-down navigation menu that includes both images and text descriptions?

My interest has been piqued on how to create a menu similar to the one on with all the images and text details. Does anyone have any insights on the technologies utilized for this? Are there any commercial options available that offer a similar functiona ...

javascriptcssmenu

Utilizing JavaScript: Passing a parameter into a function to be used with getElementById()

Implementing a feature that displays statistics by incrementing rapidly until reaching their final value when the element is in view, creating the illusion of a rising number. Encountering some difficulty in passing the necessary parameters to identify th ...

javascriptjqueryhtmlcssparameters

Failed to set CSS variable in Electron

My current dilemma involves CSS variables not being properly set. I am utilizing electron and attempting to establish them in this manner: for (let Button of ThemeButtons){ Button.addEventListener("click", e =>{ let Color = Button.s ...

javascriptcsselectron

Suggestion for a script that graphs in PHP

Searching for a user-friendly PHP-based graphing script that can generate image-based charts for e-mailing or printing purposes. Looking into PHPGraphLib, but open to other recommendations, whether commercial or GNU. Flash-based solutions are not suitabl ...

phphtml

Insert a new div directly underneath the specific div that was clicked within a series of divs

https://i.sstatic.net/gSj3D.png I am facing a situation where I have a list and need to render a box below a specific row when it is clicked. The challenge is to ensure that the other rows are shifted down accordingly. Is there any plugin that can help wi ...

htmlcssreactjsfrontend

The Rmarkdown HTML matrix output is displaying in a width that is too slim

I have explored the available solutions to increase output width : option(width=200) The problem arises when using rmarkdown to convert directly from an R file to html, as the output is constrained by the size of the html container, not the specified R o ...

htmlcssrr-markdown