CODEWITHSUNDEEP
htmlcss
Aayush
Aayush

Reputation: 3098

Make a child div as tall as an auto height parent div

I have a wrapper element that contains two floated elements the contentArea and sidebar. contentArea has the most content and therefore determines the height of the wrapper element. I want the sidebar to touch the wrapper div's bottom edge as well. How do I do that. It's a basic wordpress blog layout.

HTML:

<div id="wrapper" class="clearfix">
    <div id="content">
        GROWS REALLY TALL AS HAS SO MUCH CONTENT
        GROWS REALLY TALL AS HAS SO MUCH CONTENT
        GROWS REALLY TALL AS HAS SO MUCH CONTENT
        GROWS REALLY TALL AS HAS SO MUCH CONTENT
        GROWS REALLY TALL AS HAS SO MUCH CONTENT
    </div>
    <div id="sidebar">
        WANT'S TO BE AS TALL AS CONTENT.
        height:100%;   /*  doesn't work  */
    </div>
</div>

CSS:

#wrapper{
    height:auto;
    width:100%;
}
#content{
    height:auto;
    width:625px;
}
#sidebar{
    height:100%;
    width:335px;
}

Appreciate all the help.

Thanks

Upvotes: 5

Views: 6207

Answers (1)

Maksim Vi.
Maksim Vi.

Reputation: 9235

Is that what you are looking for?

Upvotes: 7

Related Questions