Expanding the outer div horizontally by using inner divs with scroll

Question

Expanding the outer div horizontally by using inner divs with scroll

Is there a way to ensure that all child divs are displayed on the same line within the outer div without wrapping to a second line? The width of the outer div should be fixed so that a scrollbar is visible, allowing us to scroll and view all inner divs.

http://jsfiddle.net/pkbkY/

<style type="text/css">
    .child
    {
        width: 100px;
        float: left;
    }
</style>

<div style="width: 500px; overflow: scroll;">
    <div class="child">
        <table>
            <tr>
                <td>
                    a
                </td>
            </tr>
        </table>
    </div>
    <div class="child">
        <table>
            <tr>
                <td>
                    a
                </td>
            </tr>
        </table>
    </div>
    <div class="child">
        <table>
            <tr>
                <td>
                    a
                </td>
            </tr>
        </table>
    </div>
    <div class="child">
        <table>
            <tr>
                <td>
                    a
                </td>
            </tr>
        </table>
    </div>
    <div class="child">
        <table>
            <tr>
                <td>
                    a
                </td>
            </tr>
        </table>
    </div>
    <div class="child">
        <table>
            <tr>
                <td>
                    a
                </td>
            </tr>
        </table>
    </div>
</div>

css

Answer 1

Answer №1

Here is the solution you are looking for: http://jsfiddle.net/thirtydot/pkbkY/1/

#scroll_container {
    width: 500px;
    overflow: scroll;
    white-space: nowrap;
}
.child {
    width: 100px;
    display: inline-block;
    border: 1px solid red;
}

To eliminate the gaps between the child elements, simply remove the whitespace: http://jsfiddle.net/thirtydot/pkbkY/2/

Answer 2

Here is the solution you are looking for: http://jsfiddle.net/thirtydot/pkbkY/1/

#scroll_container {
    width: 500px;
    overflow: scroll;
    white-space: nowrap;
}
.child {
    width: 100px;
    display: inline-block;
    border: 1px solid red;
}

To eliminate the gaps between the child elements, simply remove the whitespace: http://jsfiddle.net/thirtydot/pkbkY/2/

Expanding the outer div horizontally by using inner divs with scroll

Answer №1

Similar questions

Hover over buttons for a Netflix-style effect

Anchored text is obscured by a fixed Bootstrap 4 navigation bar at the top

Is there a way to customize the color of the collapsible menu?

The Bootstrap dropdown menu is cut off and not fully visible on mobile devices

Troubleshooting: Custom icons not displaying in Next.js application

What is the best way to incorporate regular, light, and bold fonts into your project using links from Google Fonts

In what ways can the current theme be utilized to optimize spacing?

Issues with webpage responsiveness, width not adjusting correctly

Having trouble accessing a CSS file through HTML

Utilizing nested flex containers with overflow-x property

Is there a way to display x-overflow on a table instead of the window?

Struggling to align content vertically within an article and in need of some guidance

The true meaning of CSS3 transition is often misconstr

Unable to retrieve dropdown value using JavaScript and display it in a div

Decrease the size of the hyperlink area to only the center portion of the text for a more precise click target

Steady Content of a Parallax Webpage

When the getImageData event is triggered upon loading

Having trouble displaying image using absolute path in Express

Combining keyframe properties in a more efficient way using less code

Enable wp_star_rating for display on the front end