What is an easy method for including a broader div within a Y-scrolling container containing multiple divs?

Here is a scenario for consideration:

http://codepen.io/anon/pen/NPGKPq

Is there a CSS approach, without incorporating Javascript, to display the full width of the blue div? Essentially, rather than having a horizontal scrollbar, only show a vertical scrollbar while allowing the blue div to extend beyond the confines of the area?

I have tried absolutely positioning the blue div over the container, but then it doesn't scroll alongside the container.

I believe I could find a workaround by using a parent container with full width and a transparent background, but I suspect I might be overlooking something simple.

Any suggestions or insights would be greatly appreciated!

For reference, here is a backup of the codepen sample:

<div id="container">
  <div class="normal_div">
    test1
  </div>
  <div id="extension_div">
    Wide test
  </div>
  <div class="normal_div">
    test2
  </div>
  <div class="normal_div">
    test3
  </div>
</div>

#extension_div
{
  display: inline-block;
  position: relative;
  left: -10px;
  z-index: 20;
  background-color: blue;
  width: 150px;
}
#container
{
  position: static;
  display: block;
  width: 100px;
  border: 1px solid black;
  height: 200px;
  overflow-y: scroll;
  overflow-x: visible;
}
.normal_div
{
  position: relative;
  display: block;
  height: 80px;
  background-color: red;
  border: 1px solid blue;
}

Answer №1

To ensure the blue div can fit without scroll bars, adjust the width of your container div and set a width for .normal_div

#extension_div
{
  display: inline-block;
  position: relative;
  left: -10px;
  z-index: 20;
  background-color: blue;
  width: 150px;
}
#container
{
  position: static;
  display: block;
  width: 170px;
  border: 1px solid black;
  height: 200px;
  overflow-y: scroll;
  overflow-x: visible;
}
.normal_div
{
  position: relative;
  width: 100px;
  display: block;
  height: 80px;
  background-color: red;
  border: 1px solid blue;
}

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

Show a checkbox element with a square in the center instead of a tick mark

Is there a way to create a custom checkbox in HTML with a black box in the center, similar to the third checkbox shown in the image below? I've noticed this design in many interfaces, but I haven't been able to find a satisfactory example online ...

CSS Attribute Selector Wildcard Capture Tool

Suppose I have the following HTML structure: <div class="tocolor-red"> tocolor </div> <div class="tocolor-blue"> tocolor </div> <div class="tocolor-green"> tocolor </div> <div class="tocolor-yellow"> tocolor ...

Add JavaScript and CSS files from the node_modules folder to enhance a static HTML webpage

Currently, my development server is set up using node's live-server. However, for production, I plan to use a LAMP server. Within my node_modules directory, I have the normalize.css file. In my index.html, I currently link to it like this: <link ...

error being triggered due to relative positioning

On my webpage, I have a set of buttons located at the bottom. When I first open the page, all the buttons are displayed properly. However, sometimes the first three buttons become hidden mysteriously and the layout changes. I am puzzled as to what could be ...

organize divs in a nested angular style

Looking to showcase div elements in a specific layout within my Angular project: https://i.sstatic.net/RH0lF.png The current HTML structure is as follows: <div class="outer-wrapper"> <div class="image" ng-repeat="image in images" ng-if="sho ...

Shrink Font-Awesome icon sizes using a Node.js and Express.js web application

Currently, I am in the process of developing a website using node.js + express.js and implementing font-awesome for icons. The local hosting of Font-awesome has resulted in a 1.2 MB JS file [font-awesome.js], even though we are only utilizing 10-15 icons. ...

Enhancing Bootstrap project with personalized CSS styling

Utilizing SCSS to create my CSS has been the approach I've taken. The content of my main.scss file remains consistent even after it is compiled into css. .my-custom-row { background-color: bisque; } Contained within my index.html file is everythi ...

Arranging content within columns according to their column position

As I design a grid with three columns, each grid box contains a div with a maximum width of 280px. Sometimes the grid columns exceed this width. To achieve my desired layout, I aim to align the content in the grid boxes so that the left column aligns to th ...

Issues have arisen with Google Maps functionality following the API integration, resulting in a blank grey

I am experiencing an issue with Google Maps where it is displaying a grey box or sometimes showing nothing/white. I have tried various solutions found online but none of them have worked for me. Does anyone have a solution? I even attempted to change the ...

Adjust and modify class when resizing the window

I've encountered a challenge with my Bootstrap Modal when trying to set the width to 750px on large desktops. When resizing the window to a smaller size, the modal loses its responsiveness. To tackle this, I added a class to the modal to give it a fix ...

When I try to hover my mouse over the element for the first time, the style.cursor of 'hand' is not functioning as expected

Just delving into the world of programming, I recently attempted to change the cursor style to hand during the onmouseover event. Oddly enough, upon the initial page load, the border style changed as intended but the cursor style remained unaffected. It wa ...

How can I insert a item into an Array using JavaScript code?

My instructor set up an array in my JavaScript file that is off limits for me to modify. My task is to add new objects to it through code without directly manipulating the existing array. Here's a snapshot of what my array contains: const words = [{ ...

What is preventing me from merging font sub properties?

When working with CSS, you have the option to combine sub-properties. For example, instead of defining a border like this: border-style: solid; border-width: 1px; border-color: #555; You can use a single declaration for the border property as a shorthand ...

Enhancing your grasp on CSS grid columns - mastering columns through float usage

Struggling to grasp the concepts of using http://semantic.gs alongside LESS.js. The documentation provided isn't quite clear, and I haven't delved deep into understanding LESS.js. However, I have gone through the Semantic Grid System website&apos ...

The hover effect does not carry over to duplicated HTML

I successfully added a node, but I forgot to include the hover function of the node in my application. The hover function is not necessary, and I need it to work with ie8 compatibility. Here's my HTML: <div id="appendCell" style="color:green; colo ...

Ways to hover and efficiently organize components?

My elements are floated with a width of 20%, resulting in 5 elements per line. The current arrangement looks like this: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Now, I want to reorganize them vertically as follows: 1 4 7 10 13 2 ...

Transient Flash of a jQuery Dropdown Menu

I'm currently developing a jQuery/CSS dropdown menu for a website, and everything is functioning well except for one issue. When navigating between sub-menu items, the text color of the selected main menu item briefly changes because of the CSS border ...

The issue with the left border color not functioning in JavaScript

Attempting to alter the border-left-color property using this script is resulting in a Uncaught SyntaxError: Unexpected token -. Is border-left-color actually supported? Javascript function logoChange() { var description = new Array (); description[0] ...

Position a div at the bottom of a grid inside another div using tailwind CSS

https://i.sstatic.net/Clw7r.pngi am struggling with the following code <template> <div class="grid grid-cols-1 gap-4"> <div id="test" class="bg-red-700 h-screen"> <div class="grid grid-cols-1 g ...

How to disable CSS transition on Angular 4 component initialization

I am facing a major issue with css transitions and Angular 4. The problem arises when using an external library that includes an input counter feature. Despite knowing that no additional styling is being applied to the wrapped input, the application has a ...