How to seperate sidebar and content?

Question

I'm trying to make a side bar and a content div but I don't know how to keep them separated and the content goes under the sidebar and obviously I don't want that. I'm pretty new to coding so I don't know what to do or if there's a better way to do this.

Here's the code:

<div id="content" style="margin:50px; background-color:blue; padding:10px;">
   <div id="sidebar" style="margin:25px; background-color:red; width:200px; border: 2px solid lime; position:fixed;">
      <p>h</p>
   </div>
   <div id="stuff" style="background-color:orange; margin:20px;">
      <p>Lorem ipsum blah blah</p>
   </div>
</div>

Answer 1

You can use display: flex at top level. It's easier to use than position: fixed or any other positioning strategies.

#content {
  margin: 20px 0;
  padding: 10px;
  background: blue;
  display: flex;
}

#content #sidebar {
  background: red;
  width: 150px;
  border: 2px solid lime;
  padding: 10px;
}

#content #stuff {
  background-color: orange;
  flex: 1;
  margin-left: 10px;
  padding: 10px;
}

<div id="content">
  <div id="sidebar" style="">
    <p>h</p>
  </div>
  <div id="stuff" style="">
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
  </div>
</div>