Html Question posted in
Some basic documentation can be found here.

Html – How do I separate body content from my side vertical navbar?

I have written some code for a vertical navbar locked to the left-side of my page, but when I try to insert my main title, it puts it in the navbar, rather than the Main content of the webpage, How do I prevent this?

When I put an h1 tag in for my page header, I thought it would put it to the side in the white space, but it shoved it in my navbar as text.

(https://i.sstatic.net/V0G51iFt.png)

Tags:

2

Answers


  1. 0

    Update your css part:

    ul{
    font-size: 19px;
    list-style: none;
    margin:0;
    padding:0;
    background-color: #cfe2cf;
    width: 230px;
    height: 100%;
    position: fixed;
    overflow: auto;
    top: 0;
    left: 0;
  }

    Add .content-area:

     .content-area{
     padding-left: 250px;
 }

    in HTML please add:

    <main class="content-area">
     <h1>This is the content area</h1>
</main>

    Here will be your output
    enter image description here

    Login or Signup to reply.
  2. 0

    The updated code seems correct. Define the width of the sidebar and give same padding from left to the content div

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search