Search code examples
cssoverflowfixed-widthliquid-layout

Adding overflow-y to block element causes width to decrease.

This is what I have, I have left div, and a right div. The left div is a fixed width, and floated left. The right Div is a "display: block" to make it full width, and has a margin on the left to compensate for the left div. Both of the boxes have a fixed height, and need to be scrollable (the contents inside). I add an overflow-y to the Left div successfully. However when I add overflow-y: auto to the right div, the div no longer spans the whole div.

Before adding Overflow: http://jsbin.com/asecuy/

After adding Overflow: http://jsbin.com/asecuy/2

Solution

  • You need to unset 

    .eventdetails {
    margin-left: 252px;
}

    This margin is causing the bug. I'm guessing it just doesn't play nice together with overflow-y and the float next to it (should work though I think).

    Here it is working:

    http://jsbin.com/asecuy/3/#html