CODEWITHSUNDEEP
htmlcss
Sidney Sousa
Sidney Sousa

Reputation: 3614

How to fix a menu on the left side and main content to the right

I wanna have menu fixed on the left side of the page occupying 20% of the width and the content on the right side occupying the rest 80%.like this:

enter image description here

At the moment, my setup looks like the following which I don't want:

enter image description here

I tried using floats to separate both container but its not really working. 

header#masthead {
    width: 100%;
    max-width: 20%;
    text-align: center;
    position: fixed;
    background-color: #232323;
    padding: 10px 20px;
    float: left;
}

How can I put the menu on the side bar(left) and the rest of the website on content the right?

Here my jsfiddle: https://jsfiddle.net/Wosley_Alarico/4bv9h7ed/1/

Upvotes: 0

Views: 3437

Answers (3)

Dylfaen
Dylfaen

Reputation: 119

You can use a wrapper for both the .site-header element and the .site-content element and add display: flex to the wrapper CSS properties. This way the .site-header element will be on the same row as the .site-content.

Now you can just modify the width of your elements to the desired value.

Here is a jsfiddle based on yours.

Upvotes: -1

kind user
kind user

Reputation: 41913

First of all, I suggest you to make a new div with .container class, as the main div. Then, you have to put your header inside it and a brand new div which is going to handle the content on the right side. All you have to do now is to prepare the css, by setting the display: flex of the main container and the width's of both children divs.

Just check the snippet carefully and I'm sure you will be able to do it by yourself next time.

* {
  margin: 0;
  padding: 0;
  border: 0;
}
.main-navigation ul {
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
}
.main-navigation li {
  border-top: 1px solid #eeb422;
  padding: 7px;
}
.main-navigation li:last-child {
  border-bottom: 1px solid #eeb422;
}
.main-navigation a {} #home {
  width: 80%;
  height: 100%;
  background-color: black;
}
header {
  width: 30vw;
}
.mainContent {
  width: 70vw;
  background-color: lightblue;
}
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
}
<div class='container'>



  <header id="masthead" class="site-header" role="banner">
    <div class="site-branding">
      <figure>
        <a href="http://localhost/cigarros/" class="custom-logo-link" rel="home" itemprop="url">
          <img width="261" height="150" src="http://pets.petsmart.com/services/_images/grooming/dog/m_t/dog-aromatherapy.jpg" class="custom-logo" alt="cropped-cigarros.jpg" itemprop="logo" />
        </a>
      </figure>
    </div>
    <!-- .site-branding -->

    <nav id="site-navigation" class="main-navigation" role="navigation">
      <!--                    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Primary Menu</button>-->
      <div class="menu-menu-1-container">
        <ul id="primary-menu" class="menu">
          <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26">
            <a href="http://localhost/cigarros/about-us/">About Us</a>
          </li>
          <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25">
            <a href="http://localhost/cigarros/products/">Products</a>
          </li>
          <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24">
            <a href="http://localhost/cigarros/contact/">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
    <!-- #site-navigation -->
  </header>
  <!-- #masthead -->

  <div id="content" class="site-content">


    <section id="home">


    </section>

  </div>


  <div class='mainContent'>

  </div>

</div>

Upvotes: 0

pratik mankar
pratik mankar

Reputation: 126

This is what you need. Make sure you are using bootstrap with this.

https://startbootstrap.com/template-overviews/simple-sidebar/

Upvotes: 3

Related Questions