Re-title: fixed div columns and remaining width-PHP Chinese Network Q&A

I'm trying to create a 5 column layout where all columns are the full height of the browser window.

Except for the middle column, the other columns should be fixed and not move when the browser/document is scrolled.

The middle column will contain the website content and will overflow vertically, so it should scroll like normal in the browser.

Besides that, all columns except the middle column have a fixed width and I need the middle column to occupy the remaining space (100% width of the parent element)

One requirement is not to use flexbox or css-grid.

The code below is what I got. Adding column "c" even messes up the full height of all columns and adds top/bottom margins. I'm lost here and would really appreciate some help.

*{ margin:0; padding:0; } body,html{ height:100%; } .parent{ height:100%; width:100%; } .parent,.a,.b,.c,.d,.e{ display:inline-block; height:100%; } .a{ background-color:#99a4fa; width:10%; } .b{ background-color:#5b6cfa; width:100px; } .c{ background-color:#3847b8; width:20%; /* this should be remaining, not 20% */ } .d{ background-color:#1a299c; width:100px; } .e{ background-color:#0d1c8d; width:10%; }

  a
locked 
  b
locked 
  remaining width 
 so all cols take up 100% width 
 of parent 

 only div that should scroll vertically with the page 
  d
locked 
  e
locked

*{ margin:0; padding:0; } body,html{ height:100%; } .parent{ height:100%; width:100%; } .parent,.a,.b,.c,.d,.e{ display:inline-block; height:100%; } .a{ background-color:#99a4fa; width:10%; } .b{ background-color:#5b6cfa; width:100px; } .c{ background-color:#3847b8; width:20%; /* this should be remaining, not 20% */ position: sticky; top: 0px; height:auto; } .d{ background-color:#1a299c; width:100px; } .e{ background-color:#0d1c8d; width:10%; }