CODEWITHSUNDEEP
htmlcss
assisrMatheus
assisrMatheus

Reputation: 475

Fixed sidebar, content under it, how to fix?

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: enter image description here

img2: enter image description here

(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.

Upvotes: 3

Views: 6686

Answers (4)

thunt
thunt

Reputation: 99

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

Upvotes: 0

Steven Hoskins
Steven Hoskins

Reputation: 161

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.

Upvotes: 1

NenadP
NenadP

Reputation: 647

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
}

Upvotes: -1

Alexey
Alexey

Reputation: 3637

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
}

Upvotes: 5

Related Questions