Page content appearing underneath sidebar

Question

I am creating a html layout with a sidebar. But my header and content are appearing underneath my sidebar instead of next to it.

.container { position:relative; padding:10px; top:0px; right: 0; left: 0; height: 1200px;}
#sidebar {
    position:relative;
    top:0; bottom:0; left:0;
    width:200px;
    height: 1000px;
    background: gray;
}

#header { border:1px solid #000; height:300px; 
    padding:10px; margin-left: 200px;
}
#content { border:1px solid #000; height:700px; margin-left: 200px;;
    padding:10px; 
}

<div class="container">
  <div id="sidebar">
      <a href="#"> Link1 </a>
  </div>
  <div id="header">
    <h2 class="title">Title</h2>
    <h3>Header content</h3>
  </div>
  <div id="content">
    <center>
      <p>Hello</p>
    </center>
  </div>
</div>

		

Thanks

Answer 1

Add "display: inline-block;" to the elements that you want to display next to each other.

Answer 2

Just add

#sidebar {
    float:left;
}

.container { position:relative; padding:10px; top:0px; right: 0; left: 0; height: 1200px;}
#sidebar {
    position:relative;
    top:0; bottom:0; left:0;
    width:200px;
    height: 1000px;
    background: gray;
    float:left;
}

#header { border:1px solid #000; height:300px; 
    padding:10px; margin-left: 200px;
}
#content { border:1px solid #000; height:700px; margin-left: 200px;;
    padding:10px; 
}

<div class="container">
  <div id="sidebar">
      <a href="#"> Link1 </a>
  </div>
  <div id="header">
    <h2 class="title">Title</h2>
    <h3>Header content</h3>
  </div>
  <div id="content">
    <center>
      <p>Hello</p>
    </center>
  </div>
</div>