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:

<div class='barralado'>

        ~sidebar content~
</div>

    <div class='conteudo'>

        <div class='inicio'>
            <div class='topo'>
                <p class='titulo'>Liga Juizforana</p>
            </div>
        </div>

    </div>

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 it, it doesn't change to 100vh.

Answer 1

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
}

Answer 2

If your sidebar has a fixed width you could using padding to the left of your content container of the sidebar width. Or you could float it to the right and set the width with the CSS calc function.

.conteudo {
  width: -webkit-calc(100% - 200px);
  width: calc(100% - 200px);
  float:right;
}

Using your code and padding option:

.barralado {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
}

.conteudo {
    padding-left: 300px;
}

.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;
}

There are a few other ways but hopefully one of the 2 options will help you achieve what you want.

Answer 3

I find it easier to set a grid for your body content, with an empty spacer div, and then your main content within the div.

HTML File:

   <div class="gridWrapper">
      <div class="spacer"> </div>
      <div class="yourMainContent"> Your content here</div>
   </div>

CSS File:

.gridWrapper {
  display: grid;
  grid-template-columns: 250px 1fr;
}

Answer 4

In this scenario of fixed widths, you can make your content div absolute positioned, to avoid going under your sidebar:

.conteudo {
   position: absolute;
   top: 0;
   left: 192px; // this is your sidebar width, according to your screenshot
}

or if for some reason you need to avoid absolute positioning, you can offset it with margin:

.conteudo {
   margin-left: 192px; // this is your sidebar width, according to your screenshot
}