html - My div wont stay in my div container -
I have some divisions in the table and I want to make one of my devices so that it does not close the page. I want to add a scroll to the container device but instead, I still close my page:
& Lt; TD & gt; & Lt; Div id = "container" style = "overflow-x: scroll;" & Gt; & Lt; Div style = "width: 1100px;" & Gt; The chart containing DIV 1 & lt; / Div & gt; & Lt; Div style = "width: 1100px;" & Gt; Div in which the chart is 2 & lt; / Div & gt; & Lt; / Div & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; / Table & gt;
First, overflow - x: Scroll to Container
Then add an extra divide to each of the divs you want to scroll through:
& lt; Div id = "container" & gt; & Lt; Div class = "scroll" & gt; & Lt; Div class = "chart" & gt; Div in which the chart1 & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "scroll" & gt; & Lt; Div class = "chart" & gt; Div in which chart2 and lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;
Now you can give "scroll" divs with the overflow-x: scroll
width (which is called 200px), and the internal "chart" div Can be set to width: 1100px
:
.scroll {width: 200px; Overflow-x: scroll; }. Chart {width: 1100px; Update: Tom is right, you have a "width" width of one percent, just make sure that you add overflow: hidden
to the body element, otherwise hide it in the table Part will overflow the page:
body {overflow: hidden; } .scroll {width: 20%; Overflow-x: scroll; }
updated
Comments
Post a Comment