How do I get rid of the space between the menu bar and the side nav?

user_15027057 0
Viewed 56

How do I get rid of the space between the menu bar and the sidebar caused by typing hello.

I have tried display:inline-block; and overflow:hidden; which got rid of the white space that was there previously and now filled it up with a color. I have also tried taking the content div and moving it so it isn't a parent(?) of .sidebar but then "hello" just ends up on the bottom of the page. I want to keep the "hello" text centered on the yellow area without having a space between the side bar and the menu bar.


Picture of the website

.menucontain{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap:5px;
    color:#F2F0D0;
    text-align:center;
    background-color:#204959;
    font-family:helvetica;
    padding:15px;
  }
    .sidebar{
      background:#204959;
    width:18%;
    height:800px;
    text-align:center;
    color:#F2F0D0;
    font-family:helvetica;
    display:grid;
    grid-template-rows: repeat(6 ,50px);
    grid-gap:2px;
     }
    .side1{
    background:gray;
    padding-top:15px;
      }
   
  .content{
    background-color:#F2F0D0;
    text-align:center;
    overflow:hidden;
      }
<div class="menucontain">

  <div class="menu1">Menu1</div>
<div class="menu2">Menu2</div>
 <div class="menu3">Menu3</div>
 <div class="menu4">Menu4</div>
 <div class="menu5">Menu5</div>
<div class="menu6">Menu6</div>
  <!--menu contain div on next line-->
</div>
  
  <div class="content">
    <p>hello</p>

<div class="sidebar">
  <div class="side1">About</div>
  <div class="side1">Blog</div>
  <div class="side1">Sales</div>
  <div class="side1">Partners</div>
  <div class="side1">Portfolio</div>
  <div class="side1">Contact</div>
  </div>   
  </div>

css html
3 Answers

The p tag is a block element, to remove the space you have to remove

hello <\p> from the 'content' class

Use flex display or grid display on the 'content' class

user_150271950

Here is the correct solution to your problem.

First, move the tag <p> in sequence for sidebar. Like this:

...
<div class="sidebar">
        <div class="side1">About</div>
        <div class="side1">Blog</div>
        <div class="side1">Sales</div>
        <div class="side1">Partners</div>
        <div class="side1">Portfolio</div>
        <div class="side1">Contact</div>
    </div>

    <p>hello</p>
...

Secondly, assign the grid rules for the .content class by adding this to your css:

.content {
    display: grid;
    grid-template-columns: 18% 1fr;
}

And remove the width rules - width: 18% out of .sidebar selector. Because we defined the width as 18% in the grid rule above.

.menucontain {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 5px;
    color: #f2f0d0;
    text-align: center;
    background-color: #204959;
    font-family: helvetica;
    padding: 15px;
}

.content {
    display: grid;
    grid-template-columns: 18% 1fr;
}

.sidebar {
    background: #204959;
    /*width: 18%;*/
    height: 800px;
    text-align: center;
    color: #f2f0d0;
    font-family: helvetica;
    display: grid;
    grid-template-rows: repeat(6, 50px);
    grid-gap: 2px;
}

.side1 {
    background: gray;
    padding-top: 15px;
}

.content {
    background-color: #f2f0d0;
    text-align: center;
    overflow: hidden;
}
<div class="menucontain">
    <div class="menu1">Menu1</div>
    <div class="menu2">Menu2</div>
    <div class="menu3">Menu3</div>
    <div class="menu4">Menu4</div>
    <div class="menu5">Menu5</div>
    <div class="menu6">Menu6</div>
    <!--menu contain div on next line-->
</div>

<div class="content">
    <div class="sidebar">
        <div class="side1">About</div>
        <div class="side1">Blog</div>
        <div class="side1">Sales</div>
        <div class="side1">Partners</div>
        <div class="side1">Portfolio</div>
        <div class="side1">Contact</div>
    </div>

    <p>hello</p>
</div>

user_135734440

Re-aling the 3 different parts (menucontain, sidebar, content) into a grid by declaring the body as a grid. Sicne you already use grids to style the menucontain and sidebar, you have to switch them to a subgrid.

body {
  margin: 0;
  display: grid;
  grid-template-columns: 18vw auto;
  grid-template-rows: min-content auto;
  min-height: 100vh;
}

.menucontain {
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: subgrid;
  grid-column-gap: 5px;
  color: #F2F0D0;
  text-align: center;
  background-color: #204959;
  font-family: helvetica;
  padding: 15px;
}

.sidebar {
  background: #204959;
  height: 800px;
  text-align: center;
  color: #F2F0D0;
  font-family: helvetica;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: repeat(6, 50px);
  grid-gap: 2px;
}

.side1 {
  background: gray;
  padding-top: 15px;
}

.content {
  background-color: #F2F0D0;
  text-align: center;
  overflow: hidden;
}
<div class="menucontain">
  <div class="menu1">Menu1</div>
  <div class="menu2">Menu2</div>
  <div class="menu3">Menu3</div>
  <div class="menu4">Menu4</div>
  <div class="menu5">Menu5</div>
  <div class="menu6">Menu6</div>
</div>

<div class="sidebar">
  <div class="side1">About</div>
  <div class="side1">Blog</div>
  <div class="side1">Sales</div>
  <div class="side1">Partners</div>
  <div class="side1">Portfolio</div>
  <div class="side1">Contact</div>
</div>

<div class="content">
  <p>hello</p>
</div>

user_140724200
Related