Fixed sidebar, content under it, how to fix?

Question

I'm trying to make a fixed sidebar, that will stay on that position when you scroll the page(as in the 2nd image), but the page content is going under that sidebar, not on its right (first image, you can see the blue part on the sidebar, that's the div going under the bar.) Img1: img2: (I'm using images links because i can't post them) html: ```

~sidebar content~

Liga Juizforana

``` css: ``` .barralado { position: fixed; top: 0; left: 0; } .conteudo { } .conteudo .topo { background-color: #ffffff; } .topo .titulo { font-size: 4em; color: white; text-shadow: 2px 2px 1px rgba(150, 150, 150, 1); margin-top: 3em; margin-left: 3.5em; } ``` I tried to put both to float left, i tried to clear, i tried all the positions on both, and it didn't worked 2nd mini question: how to make the "conteudo" div 100vh after put it on the right of the sidebar? When i try i…

Accepted Answer

A fixed positioned div will be fixed on the page, even if you scroll it. And all the stuff goes under it (it has z-index priority).

To fix it, give your content div left padding equal to the width of your sidebar.

```
.barralado {
    position: fixed;
    top: 0;
    left: 0;
    min-height: 300px; // I suggest you give a value to your sidebar. 
    width:300px; //This is your width;
}

.contneudo{
    padding-left:300px; //This is the padding that will go around your sidebar
}
```

Fixed sidebar, content under it, how to fix?

Solution

Problem