Clearfix not working with float: left and float: right in

Question

I am designing the comments section of a blog right now. My markup is a ordered list item per comment. Inside I have a heading floated left and some span-tag floated right in a header. I tried to clearfix the header (e. g. every clearfix-hack from this list: http://red-team-design.com/clearing-floats-nowadays/), but nothing worked in a way that the number stays where it should.

I made a fiddle to play around a bit, but could not get it working.

html:

<ol>
    <li>
        <article>
            <header class="clearfix">
                <h4>Heading</h4>
                <span>Some link</span>
            </header>
            <p>Some content.</p>
        </article>
    </li>
</ol>

css:

ol, li, article, header, h4, span {
    font-size: 14px;
    line-height: 28px;
    margin: 0;
    padding: 0;
}


ol {
    margin: 0 0 28px 28px;
}

h4 {
    float: left;
}

span {
    float: right;
}

If there is no good way to solve this, I am open to suggestions for markup-changes.

Edit: This is how I want it to look like:

1. Heading             Some link|
   Some content comes her. Text,|
   text, text, text, text, text,|
   text and more text.          |
                                |
2. A much longer heading        |
                       Some link|
   Some content and so on...    |
                                |
                                |
3. Even headings can be very,   |
   very long           Some link|
   Content goes here.           |
                                ^Right border of containing element.

score 0 · Answer 1 · answered May 01 '14 at 21:56

0

I think it's the clearfix which is causing your issue, I've had a play around here

http://codepen.io/dave_agilepixel/pen/hEFrk

by only floating the span, and removing the clear fix and using inline block to keep the h4 and the span on the same line, I think this works and resolves your issue.

answered May 01 '14 at 21:56

dave_agilepixel

183
6

Almost. But your solution does not work if the header gets higher than one line. Thank you so far! – Florian_1990 May 02 '14 at 07:39
Updated pen with vertical align to allow multiple lines http://codepen.io/dave_agilepixel/pen/hEFrk – dave_agilepixel May 02 '14 at 08:18

Florian_1990 · Accepted Answer · 2014-05-02T14:48:16.743

After sleeping another night over the problem I tried a different approach and it worked fine. Basically I am using list-style-type: none, a clearfix-hack and get my numbers from CSS counters.

The (updated) full solution (The old solution):

ol {
    margin: 0 0 2em 2em;
    list-style-type: none;
    counter-reset: comment;
}

ol li article header h4::before {
    counter-increment: comment;
    content: counter(comment) ".\00A0";
    display: block;
    width: 10em;
    text-align: right;
    position: absolute;
    left: -10em;
}

header {
    position: relative;
}

h4 {
    display: inline;
}

span {
    float: right;
}

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

Thank you very much, Dave and Notulysses!

(If anyone happend to know, WHY there is a problem with lists and clearfix-hacks, I would not mind, if she/he could explain that to me.)

Clearfix not working with float: left and float: right in

2 Answers2