Page content appearing underneath sidebar - html

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">
Link1
</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">
Link1
</div>
<div id="header">
<h2 class="title">Title</h2>
<h3>Header content</h3>
</div>
<div id="content">
<center>
<p>Hello</p>
</center>
</div>
</div>

Answer 3

I have introduced .inner-container and defined two flexboxes. CSS is simplified.
* {
box-sizing: border-box;
}
.container {
display: flex;
}
.inner-container {
display: flex;
flex-flow: column;
width: 80%;
}
#sidebar {
width: 20%;
background: gray;
}
#header {
border: 1px solid black;
height: 300px;
padding: 10px;
}
#content {
border: 1px solid black;
padding: 10px;
}
<div class="container">
<div id="sidebar">
Link1
</div>
<div class="inner-container">
<div id="header">
<h2 class="title">Title</h2>
<h3>Header content</h3>
</div>
<div id="content">
<center>
<p>Hello</p>
</center>
</div>
</div>
</div>

Answer 4

you should just try editing the
position: fixed
this will solve your problem.

Answer 5

You should try to change your position: relative; to position: absolute;. You can then adjust the position of your divs using a margin.
.container {
position:relative;
padding:10px;
top:0px;
right: 0;
left: 0;
height: 1200px;
}
#sidebar {
position:absolute;
top:0; bottom:0; left:0;
width:200px;
height: 1000px;
background: gray;
}
#header { border:1px solid #000; height:300px;
padding:10px; margin-left: 200px;
margin-top:-10px;
}
#content {
border:1px solid #000;
height:700px;
margin-left: 200px;
padding:10px;
}
<div class="container">
<div id="sidebar">
Link1
</div>
<div id="header">
<h2 class="title">Title</h2>
<h3>Header content</h3>
</div>
<div id="content">
<center>
<p>Hello</p>
</center>
</div>
</div>
Working fiddle: https://jsfiddle.net/khs8j3gu/2/
Good luck!