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

Vasculum

have you tried just changing 'position:relative;' to 'position:absolute;'? Like in this fiddle: jsfiddle.net/khs8j3gu – Dufresne

@Dufresne This has worked best... but the content of each div then doesn't line up with the border.... it's all below it... – Vasculum

What exactly do you mean? That the border is slightly out of proportion with the sidebar? You can fix this by adding a margin-top. Maybe this is what you need? jsfiddle.net/khs8j3gu/2 – Dufresne

Oh I just added overflow:hidden; and it fixed it @Rubenxfd. This worked, can you put it as an answer so I can accept it? :) – Vasculum

Glad I could help! I have given an answer below. – Dufresne

Answer 1

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">
      <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>

Working fiddle: https://jsfiddle.net/khs8j3gu/2/

Good luck!

Dufresne

Answer 2

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

Casmey

Answer 3

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>

Duarte

On my layout this makes my div contents appear outside my divs... ? the header and content borders span the whole page and my sidebar moves down. – Vasculum

Answer 4

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">
    <a href="#"> Link1 </a>
  </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>

Ratio

Answer 5

you should just try editing the

position: fixed

this will solve your problem.

Introspect