Additional space on clearfix parent

Question

I have a layout wherein the sidebar is fixed and the main contents container is fluid.

        <div id="contents" class="wrapper group">
            <aside id="sidebar">
                <!-- sidebar stuff here -->
            </aside>
            <section id="main-contents">
                <!-- content here -->
            </section>
        </div>

http://jsfiddle.net/QzsL5/2/

When I apply the class "group" to the ul of feeds, the ul has extra pixels added to its height, it doesn't just wrap the li inside it. But when I delete the sidebar, this extra height isn't shown. I noticed that the bottom of the ul is aligned with the bottom of the sidebar.

I don't know why it behaves this way. Help on this would be appreciated.

Thank you :)

Answer 1

I think what you might be missing is a 'clearfix' solution within your css.

Updated Fiddle: http://jsfiddle.net/QzsL5/4/

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

After implementing the above within your css, add the following class name 'clearfix' to your UL.