How to position the home content after the side nav bar?-CodePudding

Here I'm providing my HTML and CSS codes. I have already missed something in the home content of css. Can anyone tell me how to position the sections after the side navigation bar?

.home-content {
  position: absolute;
  height: 100%;
  width: calc(100%-240px);
  left: 240px;
}

.t {
  font-size: 25px;
  font-weight: 500;
  color: #000000;
  ;
  margin-top: 12px;
}

<div >
</div>
</div>
<div >
  <div >
    <h2>Home Content</h2>
  </div>
</div>
</div>
</body>

</html>

CodePudding user response：

As mentioned earlier, usedisplay: flex with a wrapper div as per the example below. More information on flexbox at CSS tricks and a nice intro from Kevin Powell on youtube

body {
  margin: 0;
}

.container {
  display: flex;
}

.sidebar {
  min-width: 15ch;
  background-color: skyblue;
  padding: 0.5rem;
}

.home-content {
  background-color: pink;
  padding: 0.5rem;
  flex-grow: 1;
}

.t {
  font-size: 25px;
  font-weight: 500;
  color: #000000;
  ;
  margin-top: 12px;
}

<div class='container'>
  <div >
    This is the sidebar
  </div>
  <div >
    <div >
      <h2>Home Content</h2>
    </div>
  </div>
</div>

CodePudding user response：

Use display flex for this. Consider wrapping your whole body code into a div and add poperties:

#wapper_div{
  width:100%;
  display : flex;
  justify-content : flex-start;
}
#sidebar {
  flex : 2; /* as per your choice */
}
#home{
  flex: 9; /* as per your choice */
 }