0

If this good practice?

<div>
    <div style="float:left;">
        text a
    </div>
    <div style="float:right;">
        text b
    </div>
    <div style="clear:both;"></div>
</div>
<div>
    text c
</div>

I've had cross-browser complications applying margins to the div containing "text c" even when I apply "clear:both" to that div. The cleanest way I've been able to consistently apply margins to elements immediately after floating elements is to apply that "break" div whose job is nothing more than to break the float and reset the line for the next element. Is this good practice?

oceanic815
  • 483
  • 2
  • 9
  • 20
  • Since there are ways to clear floats that do not add additional markup, why would you *want* to use extra markup to do so? – cimmanon Aug 20 '13 at 18:37
  • 1
    No, applying clear:both to the last div should work (http://jsfiddle.net/j08691/kvMSM/1) and your extra div is non-semantic. – j08691 Aug 20 '13 at 18:39
  • 2
    This is the clearfix issue. See http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best – Daniel Moses Aug 20 '13 at 18:45

2 Answers2

1

I have been seeing this solution around a lot lately:

/* Clearing */
.clear:before,
.clear:after,
[class*="content"]:before,
[class*="content"]:after,
[class*="site"]:before,
[class*="site"]:after {
    content: '';
    display: table;
}

.clear:after,
[class*="content"]:after,
[class*="site"]:after {
    clear: both;
}

In your example, you would apply this to the parent div that you would want to be cleared:

<div class="clear">
    <div style="float:left;">
        text a
    </div>
    <div style="float:right;">
        text b
    </div>

</div>
<div>
    text c
</div>
Simalam
  • 359
  • 1
  • 8
  • That's a ridiculous amount of CSS to do something so basic. – j08691 Aug 20 '13 at 18:41
  • I think it's clear (pun) now that the "non-semantic" div to clear the floats is the best option because it works 100% of the time and uses the least amount of code. – oceanic815 Aug 20 '13 at 18:45
  • @oceanic815 That's the problem with asking about "best practices", all you'll get is a bunch of opinions. This is not what SO is for. – cimmanon Aug 20 '13 at 20:02
0

The best solution to this problem is to apply overflow: auto; to the first div. That way, you don't need a special clearing element, and the container will automatically expand to fit the floated contents.

recursive
  • 83,943
  • 34
  • 151
  • 241
  • According to this article http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best the overflow:auto does not work in all situations but the div clear:both seems to work every time. Yet, nobody has ever said for certain if the div clear:both is good or bad practice other than it "looks" unprofessional. – oceanic815 Aug 20 '13 at 18:41
  • It's undesirable because it introduces non-semantic elements into your html. The link you provided shows a way to make `overflow: auto` work on older IE, which is what I would suggest doing if you need to support it. – recursive Aug 20 '13 at 19:07