CODEWITHSUNDEEP
htmlcsssidebar
user3002135
user3002135

Reputation: 237

sidebar doesn't stretch vertically

My sidebar doesn"t stretch vertically when I add content. How can I make it grow with HTML and CSS use only?

enter image description here

html code:

<div id="main">
    <section>
    a lot of text here...
    </section>
    <div id="sidebar">
    a 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 could be a lot of unneeded properties in there...

EDIT: Added the footer now I hope that is enough. you have to add a lot of lines to make it overlap the footer, when reproducing.

Upvotes: 1

Views: 92

Answers (2)

Mudassir
Mudassir

Reputation: 1156

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 this is not what you want or you need more help, please comment back - i'm happy to help.

Upvotes: 1

kiaaanabal
kiaaanabal

Reputation: 384

This is your problem:

postition: absolute;

This removes the sidebar from the normal flow, thus not allowing it to affect the other elements. Try replacing that with:

float: right;

Upvotes: 1

Related Questions