Hello Stack overflow users.
I'm in a bit of a struggle here, I have 4 divs.

I would like for div 4 to have it's width adjusted if the screen size is adjusted. Basically just stay within the other divs, and adjust.
Div 1,2 and 3 all have `position:fixed` to avoid them from moving when a user scrolls on the page.

But whatever I try, with `width:auto`ETC. div 4 keeps going the full length behind div 3. I have a margin set for it to pass by div 1's width length.

I've been having a hard time wrapping my head around this one, the code for my divs are listed below.

[![Div Explanation](https://i.stack.imgur.com/skrKd.png)](https://i.stack.imgur.com/skrKd.png)

```
.navbar-left {
  position: fixed;
  width: 325px;
  top: 0px;
  bottom: 0;
  z-index: 1001;
  height:auto;
}

.navbar-top{
 width:100%;
 height:60px;
 position:fixed;
 top:0;
 z-index:1002;
}

.navbar-right{
  width: 365px;
  top:0;
  height:100%;
  position:fixed;
  right:0;
}

```

Div 4 is not listed, as the code did not work. Any help is greatly appreciated.