CODEWITHSUNDEEP
csshtml
Matthew
Matthew

Reputation: 3956

Horizontal scroll div inside a div displayed as a table

I am trying to create a webpage that has two columns. I break the columns into 2 divs with the id right and left. These two columns are inside a div with the id row and that div is inside a div called table

<div id="table">
   <div id="row">
      <div id="left">
      </div>
      <div id="right">
      </right>
   </div>
</div>

My CSS is designed so that I have two columns. 

            #table
            {
                display:table;
                width: 100%;
            }
            #row
            {
                display:table-row;
                width: 100%;
            }
            #left
            {
                display:table-cell;
                width: 50%;
            }
            #right
            {
                display:table-cell;
                width: 50%;
            }

That works just fine. Now inside my left column, I want a div that can horizontally scroll images, but I don't want the column left to change width. I want to keep right and left at 50% of the screen.

Any help on how to create a sub div inside the left div that allows for horizontal scrolling of images would be very helpful. Thank you.

Upvotes: 0

Views: 501

Answers (2)

user17606
user17606

Reputation: 26

I changed your css style to remove table and use float instead:

        #table
        {
            width: 300px;
        }
        #row
        {
            width: 100%;
        }
        #left
        {
            width: 50%;
            float: left;
            overflow: auto;
        }
        #right
        {
            width: 50%;
            float: right;
        }

And add overflow:auto in whatever div you want it to render scrollbar. I assume you have a width defined somewhere.

Example: jsfiddle

Upvotes: 1

Al.G.
Al.G.

Reputation: 4406

Why don't use:

overflow-x: auto;

If the sub div is bigger, a scrollbar will appear.

Upvotes: 0

Related Questions