Strange Bottom Margin/Whitespace added to <ul>

This is my first post on SO, and I have have looked through several similarly titled posts to find an answer to this problem. I have been staring at it for a couple hours now and think there is probably an obvious answer staring back at me, but it is eluding me so far :(

I have a <div> in my sidebar that is being displayed with additional whitespace at the bottom, about 150px of whitespace that is not defined in the CSS anywhere that I can locate. I am wondering if I have a conflicted rule defined in my CSS but can not find that either. I'm pulling my hair out here because this seems like it should be straight forward to fix, but Margin-bottom: 0, Padding-bottom: 0, defined height, nothing seems to work to fix it and Firebug does not even show the whitespace as Margin or Padding. The error only seems to surface when I define width or margin to the offending div. I tried simply not defining either, but then my nested ul's and li's are not the proper width to contain their content.

Any help or advice would be greatly appreciated.

Here are snippets of my CSS and HTML along with a link to the site itself.

http://www.niagarathistle.com/clients/weekendhousewife/index.html

HTML:

<div id="category">
<div id="everyday_life">
    <h3 class="life"><a href="" rel="" title="">Everyday Life</a></h3>
    <div class="ribbon_fold_bottomright"></div><!-- to position the ribbons's bottom-right fold triangle -->
                                <ul>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                </ul>
                                <p class="view_more">[<a href="(EmptyReference!)" rel="" title="View more posts from the Everyday Life Category">view more posts</a>]</p>
                            </div>
                            <div id="cooking">
                                <h3><a href="" rel="" title="">Weekend Cooking</a></h3>
                                <div class="ribbon_fold_bottomright"></div><!-- to position the ribbons's bottom-right fold triangle -->
                                <ul>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                </ul>
                                <p class="view_more">[<a href="(EmptyReference!)" rel="" title="View more posts from the Weekend Cooking Category">view more posts</a>]</p>
                            </div>
                            <div id="photography">
                                <h3><a href="" rel="" title="">Photgarphy</a></h3>
                                <div class="ribbon_fold_bottomright"></div><!-- to position the ribbons's bottom-right fold triangle -->
                                <ul>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                </ul>
                                <p class="view_more">[<a href="(EmptyReference!)" rel="" title="View more posts from the Photography Category">view more posts</a>]</p>
                            </div>
                            <div id="scrapbooking">
                                <h3><a href="" rel="" title="">Memory Keeping</a></h3>
                                <div class="ribbon_fold_bottomright"></div><!-- to position the ribbons's bottom-right fold triangle -->
                                <ul>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                </ul>
                                <p class="view_more">[<a href="(EmptyReference!)" rel="" title="View more posts from the Memory Keeping Crafts Category">view more posts</a>]</p>
                            </div>
                            <div id="crafts">
                                <h3><a href="" rel="" title="">Homemade Crafts</a></h3>
                                <div class="ribbon_fold_bottomright"></div><!-- to position the ribbons's bottom-right fold triangle -->
                                <ul>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                    <li><a href="(EmptyReference!)" rel="" title="Read (TITLE OF THE POST) post">(The title of the Post)</a></li>
                                </ul>
                                <p class="view_more">[<a href="(EmptyReference!)" rel="" title="View more posts from the Homemade Crafts Category">view more posts</a>]</p>
                            </div>
                        </div>

CSS:

#sidebar {
    border-left: 1px dotted #231f20; 
    width: 170px; 
    padding: 0 15px; 
    margin: 0 0 15px 730px; 
}
#sidebar h3 {
    font-size: 12px; 
    letter-spacing: 1.5px; 
    color: #fff; 
    height: 25px; 
    background: #231f20 url(../images/ribbon_left.gif) left center no-repeat; 
    text-align: right; 
    line-height: 26px; /* to vertically center text on background */ 
    width: 194px; 
    padding-right: 5px; 
    margin: 0 0 5px -5px;  
    border-top: 1px #f5eee8 solid; 
    border-bottom: 1px #f5eee8 solid; 
    font-weight: normal; 
    z-index: 2; /* to properly position the h3 ribbon's bottom-right fold triangle */
}
#sidebar #category h3 {
    margin-left: 10px; 
}
#sidebar div#category div, 
#sidebar div#blogroll, 
#sidebar div#cookbooks {
    position: relative; /* to position the h3 ribbon's bottom-right fold triangle */
}
#sidebar div#category div div.ribbon_fold_bottomright, 
#sidebar div#blogroll div.ribbon_fold_bottomright, 
#sidebar div#cookbooks div.ribbon_fold_bottomright { /* to position the h3 ribbon's bottom-right fold triangle */
    position: absolute; 
    z-index: 1; 
    border-style: solid; 
    height: 0; 
    width: 0; 
    top: 27px; 
    left: 184px; 
    border-color: transparent transparent transparent #231f20; 
    border-width: 0 0 10px 10px;
}
#sidebar div#category div div.ribbon_fold_bottomright {
    left: 214px; 
}
#sidebar ul li {
    list-style: none; 
}
#sidebar div#category div { /* BUG FireFox - This rule breaks the Sidebar layout, it adds too much whitespace to bottom of Category <ul>. Why? */
    margin: 0开发者_开发知识库 0 20px -15px; 
    width: 175px; 
}
#sidebar div#category h3 a {
    color: #fff; 
    text-decoration: none; 
}
#sidebar div#category h3 a:hover {
    color: #ff7e99;;
    text-decoration: none; 
}
#sidebar div#category ul li {
    border: none; 
    margin-left: 0; 
    padding: 0; 
}
#sidebar div#category ul li:last-child {
    border-bottom: none; 
}
#sidebar div#category div ul {  
    margin-bottom: 0; 
}
#sidebar div#category p.view_more {
    margin: 0 0 0 15px; 
    font-size: 1.0em; 
}
#sidebar div#blogroll {
    text-align: center; 
}
#sidebar div#blogroll select {
    margin: 0 0 20px 10px; 
}
#sidebar div#cookbooks {
    text-align: center; 
}

To solve the problem, you have to remove the clear: both; in the hr-css defintion, because it stops the floating and sets the vertical position after the highest floated dom element.

After this you will have a problem in the div with the id "articles_prev". This you can solve by adding a class called e.g. clearBoth to the hr in this div. Define the .clearBoth in the css file with only a clear: both;. That's it.

changes in the styles.css: change hr and add clearBoth

hr {
    background: url("../images/flourish_divider.png") no-repeat scroll center center transparent;
    border: medium none;
    color: #333333;
    height: 15px;
    margin: 10px auto;
    width: 90%;
}

.clearBoth {
    clear: both;
}

changes in your html: add class to hr

<div id="articles_prev">
    ...
    <hr class="clearBoth">
    ...
</div>