html - sidebar doesn't stretch vertically -

html - sidebar doesn't stretch vertically -

my sidebar doesn"t stretch vertically when add together content. how can create grow html , css utilize only?

html code:

<div id="main"> <section> lot of text here... </section> <div id="sidebar"> lot of text here... </div> </div> <footer> copyright © domain.com 2014 </footer>

css code:

#main{ background: #ffffff; width: 60%; margin: auto; padding: 20px; position:relative; } section{ width: 75%; margin: 40px 0; padding: 0; line-height: 1.5em; min-height: 100px; } #sidebar{ width:150px; position: absolute; margin: 60px 0 0 10px; padding: 0 20px 0 20px; right:0; bottom:0; top:0; line-height: 1.5em; } footer{ width: 60%; background-color: #700505; text-align: center; padding: 20px; padding-top: 10px; padding-bottom: 10px; margin: auto; margin-bottom: 20px; color: #ffffff; }

i know there lot of unneeded properties in there...

edit: added footer hope enough. have add together lot of lines create overlap footer, when reproducing.

try this...

css:

#main{ background: #ffffff; width: 60%; margin: auto; padding: 20px; position:relative; } section{ width: 55%; display:inline-block; vertical-align:top; margin: 40px 0; padding: 0; line-height: 1.5em; min-height: 100px; } #sidebar{ width:150px; display:inline-block; margin: 60px 0 0 10px; padding: 0 20px 0 20px; vertical-align:top; right:0; bottom:0; top:0; line-height: 1.5em; } footer{ width: 60%; background-color: #700505; text-align: center; padding: 20px; padding-top: 10px; padding-bottom: 10px; margin: auto; margin-bottom: 20px; color: #ffffff; }

http://jsfiddle.net/zsdutj9p/

if not want or need more help, please comment - i'm happy help.

html css sidebar