CSS float doesn't keep outer block element sized properly.

Question

I have the following HTML code:

<ul class="blogEntry">
    <li class="title section">
        <span><asp:Literal ID="litTitle" runat="server" /></span>
        <span class="date"><asp:Literal ID="litDate" runat="server" Text="10/1/1000" /></span>
    </li>
    <li class="body section"><asp:Literal ID="litBody" runat="server" /></li>
    <li class="tags section">
        <ul class="tags">
            <li class="tag">Tag 1</li>
            <li class="tag">Tag 2</li>
            <li class="tag">Tag 3</li>
        </ul>
    </li>
</ul>

And the following CSS code:

ul.blogEntry
{
    border: 1px solid black;
    border-bottom: 0px;
    padding: 0px;
}
ul.blogEntry li.section, ul.blogEntry li.lastsection
{
    list-style: none;
}
ul.blogEntry li.title
{
    background-color: #67A7FF;
    font-size: 14px;
    font-weight: bold;
}
ul.blogEntry li.title span
{
    display: inline;
}
ul.blogEntry li.title.section span.date
{
    float: right;
}
ul.blogEntry li.section
{
    padding: 4px;
    border-bottom: 1px solid black;
}

As is, the date will drop to a new line and float to the right. If I change the ul.blogEntry li.title span CSS and add float: left; The outer LI element's height shrinks and the bottom border cuts right through the spans' text. Advice?

Answer 1

You should add a element with "clear:both" into the outer element.

Answer 2

try:

.section {min-height: 10px;}

that should clear your floats for all your section classes in ie7 and 8. you may try floating the element above your date left to see if that works.

also, when floating something, you should usually set the width

Answer 3

Please don't add any elements for clearing. Elements which only enable specific styling significantly breaks semantics and separation of concerns.

The simple answer is to add overflow:auto; to the container element (i.e. li.title) but there are other ways:

• http://www.positioniseverything.net/easyclearing.html
• http://www.innovatingtomorrow.net/2008/03/24/how-clear-floats-css
• http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

Clearing blocks are EVIL.