Rotate the horizontal scroll of an inner div within an outer div using CSS

I am looking to create an outer div with horizontal scroll and inner div with vertical scroll where the inner div moves along with the outer div.

<body>
  <div id="wrapper">

    <div id="outer">content outer
        <div id="inner"> 
          <table>
            <tr>
              <td>column1</td>                
              <td>column2</td> 
              <td>column2</td>  
              <td>column2</td>  
              <td>column2</td>                      
        </tr>
        </table>
        </div>
    </div>
</div>
</body>
#wrapper {
    position:relative;
    height:200px;
    width:200px;
}

#outer {
    background-color: red;
    overflow-x: auto;
    overflow-y: hidden;
    height:200px;
    width:200px;
    white-space: nowrap;
}

#inner {
    color: white;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    height:150px;
    background-color: blue; 
    white-space: nowrap;
    position:relative; z-index:1;
}

By adding overflow-y: scroll; to the Inner Div, the horizontal scroll is limited to the Inner Div and does not affect the outer div.

Answer №1

Wishing success with this solution

Listening for the scroll event on the "#outer" element:

$("#inner").scrollLeft($(this).scrollLeft());

Keep smiling and winking!

Answer №2

I believe I comprehend your desired outcome.

#container{
Width:150px;
height:250px;
overflow:hidden;
}

#outer{
width:350px;
height:250px;
Overflow:auto;
}
#inner{
width:180px;
Height:450px;
overflow:auto;
}

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

Hovering over an image will not cause the floating header to appear

My attempt to create a header that fades with scroll and appears on hover is working perfectly, except for the cat pictures in the Portfolio section. Despite adjusting z-indexes and trying various solutions, the header just won't show up over the h4 e ...

What is the best way to change the size of an SVG image

I have exhausted all the methods I could find on stackoverflow and Google, but my SVG is refusing to resize. Would someone kindly shed some light on why this might be happening? <div> <svg viewBox="32 32 32 32" height="100" width="100"> ...

Troubleshooting JavaScript for Sidebar Disappearance due to marginRight and display CSS Issue

I need to adjust the layout of my website so that the sidebar disappears when the window is resized below a certain width, and then reappears when the window is expanded. Here is the HTML code: <style type="text/css"> #sidebar{ width:290 ...

creating unique styles for your Ionic app with Angular using JSON

Having trouble changing the item color. Does anyone know why my CSS isn't working, or if I'm missing something? <ion-view title="Add order to a table"> <ion-content class="has-header has-subheader"> <ion-list> ...

"What is the best way to use JavaScript to dynamically modify the hover color of a button

I am looking to customize the hover color of all buttons on my website to align with the overall theme. The challenge is that I need the hover color to vary based on the page it originates from. I have successfully identified the referring page, but I am s ...

Arrangement of content in three columns with a flex direction set to column

In my current project, I am working on creating a view of items that are mapped using React. The main objective is to set up a 3-column layout with items arranged vertically within each column. Each item panel contains a hidden div element which expands wh ...

Issues with implementing Bootstrap 4 navbar on a Rails 5 application

I'm currently in the process of transitioning my static HTML/CSS/JS website to a Rails application. Using Bootstrap 4, I had all the functionality and CSS classes working perfectly on the static site. However, after the migration to the Ruby app, the ...

Determining parent height through the positioning of children

When it comes to CSS, it's truly fascinating until you hit a roadblock and the "aha moment" seems elusive. Today, I'm struggling with adjusting the height of my parent div that contains a relatively positioned element. The issue arises from the ...

When switching between tabs on Twitter Bootstrap, the page automatically scrolls to the top

I am encountering an issue with my tabs setup. Each tab has a different height and there is a Row on top of the tabs. You can see the problem in action on this JSFiddle. Whenever I switch from a tab with greater height to a tab with less height, the page ...

What is the best way to incorporate content just out of view below the parallax section that becomes visible as you scroll?

Check out this amazing parallax effect: https://codepen.io/samdbeckham/pen/OPXPNp <div class="parallax"> <div class="parallax__layer parallax__layer__0"> <img src="https://github.com/samdbeckham/blog/blo ...

Is there a way to specify both a fixed width and a custom resizable length for a Spring <form:textarea /> element?

Despite extensive research, I have yet to find an answer to my specific problem. Within a model window, I have a textarea element: <div class="form-group"> <label for="groupDescription" class="col-sm-2 control-label"> Descripti ...

Click on another part of the page to reveal a dropdown menu

I am seeking a way to trigger the opening of this dropdown select not by directly clicking on its position, but rather by clicking on another <span>. Displayed below is the dropdown menu: <div class="styled-select"> <span id="camDurati ...

Creating dynamic visual effects for text on image with animation

I have created an animation where an image transitions from black and white to colored upon hover, accompanied by overlay text. However, when hovering over the text, the image reverts back to black and white. How can I ensure that the image stays in color ...

Is there a way to disable a JavaScript hover effect when the mouse moves away?

I came across this JavaScript code that swaps the background of a parent div when clicking on a link in a child div. However, I noticed that the hover state remains even after moving the mouse out of the link. Can someone help me modify the code so that ...

Optimizing Bootstrap popover responsiveness for elements with excessive length to ensure a smooth display experience

I am currently working on creating a popover that remains in position when hovered over, specifically for elements that are too large to fit on the screen. However, I am facing some issues with my current implementation: <template> <div class ...

The persistent underline on the tooltip just won't go away

Hey there, this is my first time posting a question here so I hope I got everything right! I'm currently in the process of creating a form for a WordPress site using Bootstrap. I need to incorporate tooltips with Font Awesome icons, but for some reas ...

Issue with border rendering on triangles in CSS on IE8

I currently have a horizontal navigation bar with triangle borders inserted using :before and :after for each list item. This creates the illusion of a white bordered point on the right side of each list item. The issue I'm facing is that this design ...

When the open button is clicked, the Div will toggle between open and closed states

Recently, some of my questions have not been well-received, which makes me feel a bit disheartened. It's important to remember to be kind when providing feedback. I've noticed that some people downvote without offering constructive criticism, whi ...

Tips on preventing the constant shifting of my webpage div elements when resizing the browser

Whenever I resize my webpage browser, the 3 text input boxes move and overlap, causing the page layout to become messy. View of The Browser in full screen (normal) View of The Browser when it's smaller (not normal) As a beginner programmer, I have ...

Utilizing CSS naming conventions to bring order to class inheritance

I'm a bit unclear about the rationale behind using this specific CSS structure: h2.class-name It seems like you could simply use .class-name and apply that class to the h2 element: <h2 class="class-name">Title thing</h2> Unless it&apos ...