Chrome clear-fix

Question

I am working on some website template for my new project but having some trouble making the sidebar fill the height of its container. I tried all clear-fixes but none of them seem to work (tested in Chrome). So I'm wondering, what's wrong with my code or does anyone know what'd be the right way to fix it for my code? This is the code of subject:

HTML:

<div class="container">
<div class="header">
    <div class="logo">
        <a href="#"><img src="images/logo.png" border="0" /></a>
    </div>
    <div class="nav">
        <a href="#" id="current">Home</a>
                ...
    </div>
</div>
<div class="below_header">
    <div class="user_message">
               ...
    </div>
    <div class="quick_stats">
               ...
    </div>  
</div>
<div class="content">
    <div class="bar_blue"> ... </div>
    <div class="content_text"> 
    <div class="content_info">
                ... text ...
    </div>
    <div class="quick_create">
                ...
    </div>
    </div>
    <div class="bar_white">
        Some Title
    </div>
    <div class="content_text">

    </div>
    <div class="footer">
        ...
    </div>
</div>
<div class="sidebar">
    test
</div>
</div>

CSS:

div.container {
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    //height: 100%; 
    border: 1px solid #E0E0E0;
    border-top: 0px;
    border-bottom: 0px;
}

.container {
    display: inline-block;
}
.container:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}
div.content {
    float: left;
    width: 635px;
    height: 100%;
}

div.sidebar {
    float: left;
    width: 262px;
    height: 100%;
    background-image: url("images/sidebar.png");
    background-repeat: repeat-y;
}

Where div.content and div.sidebar are the only floating divs which need to be equal height. Right now the sidebar doesn't match the height of the floating content div left of it (which is larger than the sidebar). Tried all clear-fixes but none worked. How can I fix this?

Answer 1

Check this jsfiddele

I used the same html you provided and changed the CSS only. I clearly commented the places where I made the changes

I used the same trick which used here. Added the below code to both sidebar and content.

padding-bottom: 500em;
margin-bottom: -500em;

Hope this will help.