Header that stays in place even when there is too much content to fit horizontally

On my HTML page, I have a main header and body. Inside the body, there is another header and body that overflows horizontally.

I want to ensure that no white space appears on the right side of both headers when the inner body scrollbar is moved right. Instead, I want the headers to "move" along with it.

I managed to fill the space in the main header by using

position: sticky;
left: 0;

However, I am struggling to find a way to replicate this for the inner header.

Here is a Fiddle showcasing the issue.

Any assistance on this matter would be greatly appreciated.

htmlcss

Answer №1

After reviewing your code, I noticed that the width attribute in the .body element has not been defined. This could be causing issues with the sizing of the child elements like .inner-header and .inner-body, whose sizes are dependent on the parent element if the width property is not specified.

To resolve this issue, you should include width: fit-content; in the ".body" element.

.body {
  width: fit-content;
}

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

Sliding Up Transition Effect for Footer with JQuery or CSS3

I am attempting to replicate a sleek slide up footer that caught my eye on The Internship Movie Site. I have created the wireframe layout, but I am struggling to figure out the correct CSS transition effect. Although I have experimented with the "top" and ...

jqueryhtmlcss

AngularJS Validation does not verify the step limitation of an HTML number input field

Why isn't AngularJS validating the step="0.01" attribute in the second input? It seems to be working fine for the min and max attributes, but not for step. For instance: When entering 0.005, it still evaluates submitNewEntryForm.submitNewEntryAmount. ...

angularjshtmlforms

The Fade In effect in jQuery causes my fixed header to overlap with images on the page

This is the javascript snippet using jquery <script type="text/javascript> $(document).ready(function () { $('#showhidetarget').hide(); $('a#showhidetrigger').click(function () { $('#showhidetarget&apo ...

jquerycssfixedstickyoverlapping

Issue with the Styled Components Color Picker display

For the past 6 months, I have been using VSCode with React and Styled Components without any issues. However, recently I encountered a problem where the color picker would not show up when using CSS properties related to color. Usually, a quick reload or r ...

javascriptcssreactjsvisual-studio-codestyled-components

Whenever I click on a hyperlink, IE7 shifts the position of my navigation

My navigation is positioned absolutely to its relative parent. Although I used some hacks to make it work in IE7 and IE8, it's still not as smooth as the CSS3 code I used for FF/Chrome and Opera. The issue arises when clicking on an anchor in the menu ...

cssinternet-explorer-7css-position

What are some alternative methods to achieve the same styling in CSS for IE6 without using

Can you please provide the standard equivalents for the following IE6 css hacks? .header { zoom: expression(runtimeStyle.zoom=1); z-index: 1; } .hmenu ul li { float: left !important; } ul.hmenu li { margin-left: expression(this.previousSibling= ...

cssinternet-explorer-6css-expressions

Enhance your CouchDB experience by customizing templates to include unique headers and footers

I am currently using CouchDB and CouchApp to host a web application. I have experience with Django and Jinja2, where I can extend templates in two different ways: {% include "header.html" %} or {% extends "base.html" %} <<<---- my preferred me ...

htmltemplatescouchdbcouchapp

Unable to set height:auto for the background image

For more information, visit this link. I am looking to customize the comments area by giving it a solid color that dynamically adjusts its height based on the number of comments. The background color should expand if there are many comments and shrink if ...

htmlwordpresscss

Expanding the Background Color when Hovered Over

Despite my extensive search on SO, none of the answers I found seem to address my specific situation. In a col-md-2 section where I have a navigation bar, I am trying to change the background color to extend up to the border when hovering. While I can cha ...

htmlcsshover

Switch the text within the div and alternate between showing different content in separate divs by utilizing jquery

Check out the jQuery code snippet below: $(document).ready(function () { $('#prvnote').hide(); $('#regclass').click(function () { $('#prvnote').toggle(400); $('#newdiv').toggle(400); }); ...

javascriptjquerycsshtml

How can I automatically disable the button after resetting the form's state?

This form has a feature where the submit button is disabled until all form fields are complete. Once the submit button is clicked, preventDefault() function runs and an alert pops up. However, after closing the alert, the form resets but the button state r ...

javascripthtmlvalidation

The flex grow animation fails to activate when the Bootstrap 4 style sheet is added

Trying to implement transitions with flex grow has been a challenge. It works smoothly without any issues, but as soon as I add the bootstrap 4 style sheet, the transitions stop working. I haven't even started using the bootstrap 4 classes yet, it&apo ...

cssflexboxbootstrap-4transition

CSS Table columns are set to have a fixed width for the first and last columns, while the middle two columns have dynamic widths

I was able to create a table layout like this: fixed - dynamic(50%) - dynamic(50%) - fixed http://jsfiddle.net/ihtus/ksucU/ Now, I'm wondering how to achieve this layout instead: fixed - dynamic(30%) - dynamic(70%) - fixed This is the CSS code I c ...

htmlcss

Restrict the amount of decimal places allowed in input text

Another question on Stack Overflow addresses limiting the number of characters allowed in a form input field. I am specifically looking to restrict the number of digits that can come after the decimal point to 2 digits. <input type="text" maxlength="2 ...

htmlformsinput

CSS Transform animation does not work when a class is added programmatically, although it functions properly when toggling the class in Chrome

Attempting to create an animation for the transform of a div. Below is the code with transition and transform properties in Safari: #mydiv{ transition: all 2.3s cubic-bezier(1, 0, 0, 1); transform: scale(0.5); background:white; padding:30 ...

jquerycsscss-transitionscss-transforms

Leverage the object's string name to make changes to its properties within asp.net

I am looking to utilize the String value stored in a variable to access a control within the site.master. This specific string will serve as the identifier for the control. The control is named login, and my objective is to change its visible property to ...

htmlasp.netvb.net

Execute a JavaScript function upon pressing the 'Enter' key without using jQuery

Hey there! I'm looking to trigger a JavaScript function when the Enter key is pressed. Check out my current code below: HTML <!DOCTYPE html> <html> <head> <title>JS Bin</title> </head> <body> <d ...

javascripthtml

Is there a glitch in the Bootstrap v4 Navbar?

Encountering an issue with the default navbar example from Bootstrap's official website. The navbar is supposed to be full-sized and collapse when the screen size decreases. However, after implementing the code into my project, it appears as always co ...

jqueryhtmlcssbootstrap-4twitter-bootstrap-4

Use two fingers to scroll up and down on the screen

I am currently developing a sketch web application (using angular) that utilizes one finger gestures for drawing. My goal is to enable vertical scrolling in the sketch content by using two fingers. However, when attempting to scroll with two fingers, Safa ...

javascripthtmlmobilescrollsafari

Click event not triggering to update image

I'm currently working on a Codepen project where I want to use JavaScript to change the image of an element with the id "chrome". However, my code doesn't seem to be working as expected. Can someone help me troubleshoot and fix this issue? Your a ...

javascripthtmlcss