Search code examples
htmlcsslayoutflexbox

Grid layout overlap with Side Bar

I am trying to create Blog design. Where I require side bar , navigation , footer and main content area. I have create navigation on top with some links. Side bar with some sample text. I have created the page with flexbox and trying to create main content area with grid . I am planning to divide grid in three equal area and will use some cards to put the content there. Right now , the main content area is overlapping with Side bar. I am not sure how to fix it. I have created side bar , navigation and main content area . I have used main page using flexbox and I need to create a grid within the flex box and divide the grid in equal three column where i can fit some content. my grid is overlapping with side bar and go all the way to the side bar. [![enter image description here][1]][1]

I have included Image to explain and also added code with JSfiddle for reference. [1]: https://i.sstatic.net/EsImd.png

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  font-family: sans-serif;
  background-color: seashell;
}

#page {
  display: flexbox;
  height: calc( 100vh - 30px);
  flex-direction: column;
}

#sidebar {
  margin-left: 2.5rem;
  margin-right: 2.5rem;
  width: 100px;
}

.content {
  display: grid;
  grid-template-columns: 40% 40% 40%;
  grid-template-rows: auto;
  background-color: #2196F3;
  padding: 10px;
}

.one {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.two {
  background-color: blue;
}

.three {
  background-color: purple;
}

.box {
  background-color: #444;
  grid-template-rows: 5;
  grid-template-columns: 10;
  color: #fff;
  border-radius: 5px;
  padding: 30px;
  font-size: 150%;
}

.nav-list {
  background: #5bb1f9;
  box-shadow: 0px 0px 10px var(--clr-gray200);
  padding: 1rem 0;
  border-radius: var(--radius);
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  align-items: baseline;
}

.nav-item {
  list-style: none;
  margin-right: 2rem;
  text-align: center;
}

.nav-item a {
  text-decoration: none;
  color: black;
  transition: all 200ms ease-in;
  text-align: center;
}

.nav-item a:hover {
  color: var(--clr-primary-dark);
}
<div id="header">
  <navbar>
    <ul class="nav-list">
      <li class="nav-item">
        <a 
          href="https://twitter.com/share?ref_src=twsrc%5Etfw" 
          class="twitter-share-button" 
          data-show-count="false"
        >Tweet</a>
        <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
      </li>
      <li class="nav-item">
        <script src="https://platform.linkedin.com/in.js" type="text/javascript">
          lang: en_US
        </script>
        <script type="IN/Share" data-url="https://www.linkedin.com"></script>
      </li>
      <li class="nav-item"><a href="#">Home</a></li>
      <li class="nav-item"><a href="#">Article</a></li>
      <li class="nav-item"><a href="#">Article</a></li>
      <li class="nav-item">Login</li>
    </ul>
  </navbar>
</div>

<div id="page">
  <div id="sidebar">
    <div>
      My profile
    </div>
    <div>
      My interest
    </div>
  </div>
  <div id="content">
    <div class="one">
      one
    </div>
    <div class="one">
      two
    </div>
    <div class="one">
      three
    </div>
  </div>
</div>

Solution

  • Change style for #page selector

    #page {
  display: flex; /*display:flex; not flexbox */
  height: calc( 100vh - 30px);
  flex-direction: row; /* Change flex-direction to column*/
}

    And depending on your requirement add below CSS to #content selector

    #content {
  flex:1;
  display: grid;
  grid-template-columns: repeat(3,1fr)
  grid-template-rows: auto;
  background-color: #2196F3;
  padding: 10px;
}

    Note: You have used class selector . for content. which should be #. Check codepen.io link

    https://codepen.io/emmeiWhite/pen/GRmBQbR

    Layout Issue