Div not producing scrollbar when page width narrows

Question

A link to the jfiddle here: https://jsfiddle.net/obanc/vqabukvj/

<div id="bodywrapper" style="max-width:100%;min-width:1000px;overflow:auto;">

    <div id="leftpanel" style="width:20%;position:absolute;background-color:red;height:100%;left:0;top:0;min-width:200px">
    </div>

    <div id="rightpanel" style="width:80%;position:absolute;background-color:blue;height:100%;right:0;top:0;min-width:800px">
    </div>
</div>

This is a more detailed version of an earlier unsolved question. I am not sure why parts of the page are rendered unseen when the page width becomes narrower. From my knowledge, the min-width tag is supposed to make a scrollbar produce when the #bodywrapper width of 1000px is compromised and becomes less than 1000px. Instead, parts of the divs are being hidden from the page when it narrows less than 1000px. Any help is appreciated, been stuck on this problem for a while.

This link might help as well: http://stackoverflow.com/questions/3225102/css-overflow-hidden-with-absolute-position — dbp, Oct 06 '15 at 23:49

score 0 · Answer 1 · answered Oct 07 '15 at 00:03

You already have the width set as 20% and 80% respectively. If you remove "min-width" for both div elements you will get what you want. I also added float for both. Here is the code:

<div id="leftpanel" style="width:20%;float:left;position:absolute;background-color:red;height:100%;left:0;top:0">
</div>

<div id="rightpanel" style="width:80%;float:left;position:absolute;background-color:blue;height:100%;right:0;top:0">
</div>

Here is a link to the fiddle: https://jsfiddle.net/john_h/vqabukvj/2/

Hope that helps.

Lizardx · Answer 2 · 2015-10-07T00:43:54.070

It is helpful to think through what you actually want. Since the overall container is set to overflow x and y, ie: overflow:auto, and it has a min-width of 1000px, you next have to pick whether you want the width to be 20%/80% for the panels, OR if you want them to be min-width:200px/min-width:800px. Generally for liquid type layouts I'd go with the percent widths, since it's already given that the min width of two panels in a container that is 1000px wide minimum are going to be 200px/800px already if their widths are 20%/80%.

<div id="bodywrapper" style="min-width:1000px;overflow:auto;position:relative;">

<div id="leftpanel" style="width:20%;float:left;background-color:red;height:100%;">
</div>

<div id="rightpanel" style="width:80%;float:left;background-color:blue;height:100%;">
</div>

</div>

Note however that if you set overflow:auto on the main container div, it will overflow y, ie, vertical, if the page is taller than the browser display window height. My guess is you actually want: overflow-x:auto; ie, overflow horizontally but not vertically.

It's actually hard to know exactly what you intend here however, do you want the display to scroll x and y? do you want the two columns to occupy the entire screen height, but no more ever? Floats in that case will create issues, as will absolute positioning. It's hard to say without any actual description of the desired end layout result.

score 0 · Answer 3 · answered Oct 07 '15 at 04:02

You just need is to give float left to the left panel as it takes 20% so after 20% of width it should give space to other and stay on left so by that other 80% will also seen in the same frame

you can try this code

<div id="leftpanel" style="width:20%;float:left;position:absolute;background-color:red;height:100%;left:0">
</div>

<div id="rightpanel" style="width:80%;position:absolute;background-color:blue;height:100%;right:0">
</div>

Div not producing scrollbar when page width narrows

3 Answers3