How to add overflow-y:scroll?

Question

I have my html code :

<div>
    <div class="cusDlg PP_noselect" tabindex="0" style="position: relative; border: 1px solid rgb(192, 192, 192); padding: 5px; background-color: rgb(214, 214, 214); font-family: arial; font-size: 13px; overflow: hidden; width: 400px; height: 125px;">
        <div class="dlghdr" style="position: relative; top: 0px; height: 20px; width: auto; padding: 2px; line-height: 20px;">
            <div style="float: left;">ROW X COLUMN</div>
        </div>
        <div style="position: relative; width: 395px; padding: 2px; background-color: rgb(255, 255, 255); display: table;">
            <div style="float: left; display: table; border-spacing: 2px; border-collapse: separate;">
                <div unselectable="on" index="0" title="0 X 0 - SOME DATA" class="ofd_sel_fnm" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 0</div>
                <div unselectable="on" index="1" title="0 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 1</div>
                <div unselectable="on" index="2" title="0 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 2</div>
                <div unselectable="on" index="3" title="0 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 3</div>
            </div>
            <div style="float: left; display: table; border-spacing: 2px; border-collapse: separate;">
                <div unselectable="on" index="4" title="1 X 0 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 0</div>
                <div unselectable="on" index="5" title="1 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 1</div>
                <div unselectable="on" index="6" title="1 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 2</div>
                <div unselectable="on" index="7" title="1 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 3</div>
            </div>
            <div style="float: left; display: table; border-spacing: 2px; border-collapse: separate;">
                <div unselectable="on" index="8" title="2 X 0 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 0</div>
                <div unselectable="on" index="9" title="2 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 1</div>
                <div unselectable="on" index="10" title="2 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 2</div>
                <div unselectable="on" index="11" title="2 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 3</div>
            </div>
        </div>
    </div>
</div>

I would like to add overflow-y:scroll, so that the column starting from 2 X 0 appears right to the column 1 X 0.

I have tried various css, but unable to figure out how to fix. Please someone help me to figure out.

Answer 1

Although I would use flexbox instead of specifying the width in pixels, you essentially want to prevent the float attribute to wrap your element in a new line. You can do this using display: inline-block and white-space: nowrap:

<div>
    <div class="cusDlg PP_noselect" tabindex="0" style="position: relative; border: 1px solid rgb(192, 192, 192); padding: 5px; background-color: rgb(214, 214, 214); font-family: arial; font-size: 13px; overflow: hidden; width: 400px; height: 125px;">
        <div class="dlghdr" style="position: relative; top: 0px; height: 20px; width: auto; padding: 2px; line-height: 20px;">
            <div style="float: left;">ROW X COLUMN</div>
        </div>
        <div style="position: relative;width: 100%;padding: 2px;background-color: rgb(255, 255, 255); white-space: nowrap; overflow-y: auto;">
            <div style="display: inline-block;border-spacing: 2px;border-collapse: separate;">
                <div unselectable="on" index="0" title="0 X 0 - SOME DATA" class="ofd_sel_fnm" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 0</div>
                <div unselectable="on" index="1" title="0 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 1</div>
                <div unselectable="on" index="2" title="0 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 2</div>
                <div unselectable="on" index="3" title="0 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 3</div>
            </div>
            <div style="display: inline-block;border-spacing: 2px;border-collapse: separate;">
                <div unselectable="on" index="4" title="1 X 0 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 0</div>
                <div unselectable="on" index="5" title="1 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 1</div>
                <div unselectable="on" index="6" title="1 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 2</div>
                <div unselectable="on" index="7" title="1 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 3</div>
            </div>
            <div style="display: inline-block;border-spacing: 2px;border-collapse: separate;">
                <div unselectable="on" index="8" title="2 X 0 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 0</div>
                <div unselectable="on" index="9" title="2 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 1</div>
                <div unselectable="on" index="10" title="2 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 2</div>
                <div unselectable="on" index="11" title="2 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 3</div>
            </div>
        </div>
    </div>
</div>

Answer 2

Do you want the column 2x0 just to appear on the right or do you want a scrollbar too? If you just want the columns to be next to each other you could try using tables (a table to hold other tables), and if that doesn't work just use css grid layouts with three grid columns of specified (or auto) width, and then one row of auto height, and then just place the tables as you see fit. (And then I guess just type "overflow-y:scroll" somewhere in the box div if you really want the scrollbar.)

Answer 3

the position of 2 x column depends not on overflow-y

it depends on width so you would have to add width of column on 30% of width of parent, and add correct child html atribute to table so table-cell

<div>
    <div class="cusDlg PP_noselect" tabindex="0" style="position: relative; border: 1px solid rgb(192, 192, 192); padding: 5px; background-color: rgb(214, 214, 214); font-family: arial; font-size: 13px; overflow: hidden; width: 400px; height: 125px;">
        <div class="dlghdr" style="position: relative; top: 0px; height: 20px; width: auto; padding: 2px; line-height: 20px;">
            <div style="float: left;">ROW X COLUMN</div>
        </div>
        <div style="position: relative; width: 395px; padding: 2px; background-color: rgb(255, 255, 255); display: table;">
            <div style="width: 30%; float: left; display: table-cell; border-spacing: 2px; border-collapse: separate;">
                <div unselectable="on" index="0" title="0 X 0 - SOME DATA" class="ofd_sel_fnm" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 0</div>
                <div unselectable="on" index="1" title="0 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 1</div>
                <div unselectable="on" index="2" title="0 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 2</div>
                <div unselectable="on" index="3" title="0 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 3</div>
            </div>
            <div style="width: 30%; float: left; display: table; border-spacing: 2px; border-collapse: separate;">
                <div unselectable="on" index="4" title="1 X 0 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 0</div>
                <div unselectable="on" index="5" title="1 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 1</div>
                <div unselectable="on" index="6" title="1 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 2</div>
                <div unselectable="on" index="7" title="1 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 3</div>
            </div>
            <div style="width: 30%; float: left; display: table-cell; border-spacing: 2px; border-collapse: separate;">
                <div unselectable="on" index="8" title="2 X 0 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 0</div>
                <div unselectable="on" index="9" title="2 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 1</div>
                <div unselectable="on" index="10" title="2 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 2</div>
                <div unselectable="on" index="11" title="2 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 3</div>
            </div>
        </div>
    </div>
</div>