Home/ Questions/Q 6924107
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T10:37:16+00:00

I’m trying to get two divs always side-by-side even when the container is too

  • 0

I’m trying to get two divs always side-by-side even when the container is too small. I want to hide the overflow of the righthand div, but can’t seem to achieve this. When I resize the browser to make the scrollbar appear on the body, the right-hand div moves down underneath.

Here’s my HTML so far:

<!DOCTYPE html>
<html>
    <head>
        <style>
body {
    margin: 0;
    padding: 0;
    min-width: 800px; overflow: auto;
}       

span { display: block; }

#div-outer {
    width: 95%;
    height: 300px;
    padding: 2px;
    border: 4px solid green;
    display: block;
}

#div-box-left {
    border: 3px solid black;
    width: 250px;
    height: 250px;
    float: left;
    display: inline-block;
}

#div-box-right {
    border: 3px solid red;
    height: 250px;
    margin-left: 10px;
    overflow: hidden;
    float: left;
    display: inline-block;
}

#tbl {
    background: yellow;
    border: 3px solid blue;
}

        </style>
    </head>
    <body>
        <span>Wide div to contains two divs</span>
        <div id="div-outer">
            <div id="div-box-left">
                Left div with a width of 250px
            </div>
            <div id="div-box-right">
                <span>This contains a table but is too wide to fix - I want the table's overflow hidden</span>
                <table id="tbl">
                    <tr>
                        <td>Column</td>
                        <td>Column</td>
                        <td>Column</td>
                        <td>Column</td>
                        <td>Column</td>
                        <td>Column</td>
                        <td>Column</td>
                        <td>Column</td>
                        <td>Column</td>
                        <td>Column</td>
                        <td>Column</td>
                        <td>Column</td>
                        <td>Column</td>
                        <td>Column</td>
                        <td>Column</td>
                        <td>Column</td>
                        <td>Column</td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You may need another div, alternatively you could apply the style for .outer on the body:

    Simplified example

    CSS:

    .outer{width: 600px; overflow:hidden; border:2px solid lightblue; padding:10px;}
.innerwrap{width:9999px;}
.inner{width:400px; height:200px; border:2px solid salmon; float:left;}

    HTML:

    <div class="outer">
<div class="innerwrap">
    <div class="inner"></div>
    <div class="inner"></div>
</div>

    Your example, fixed.

    • 0