better float clearing

Question

Possible Duplicate:
How do I clear my floats?

is there any way to clear floats better than clear div?

currently i'm using a div to clear floats like

<div style="clear:both"></div>

@asya check this http://stackoverflow.com/questions/5266667/hr-clear-vs-div-clear-which-is-better/5266729#5266729 — Sotiris, Mar 12 '11 at 14:07
@Sotiris You would be best to post it as an answer so the asker can mark the question as "answered" :) — Myles Gray, Mar 12 '11 at 14:11
thank you sotiris. can i remove this question myself or need to wait moderators. — asya, Mar 12 '11 at 14:16

Spudley · Answer 1 · 2011-03-12T15:48:50.897

2

As an alternative suggestion, you could not use floats at all...

I've found that virtually everything that I would floats to do, I've been able to achieve just as well using display:inline-block;, and without having to mess around with clearing the floats.

I know it's a slightly left-field answer, but it's worth considering.

inline-block does have a few quirks of its own, but I hope you'll give it a try. (Oh, and it does have some bugs in IE6 which may put you off if you need to support that browser... they can be worked around, but if you're supporting IE6 then you have enough other problems to worry about anyway)

edited Mar 12 '11 at 15:48

answered Mar 12 '11 at 14:53

Spudley

166,037
39
233
307

Yeah, that whole browser support issue presents a problem in this case. I know IE6 usage percentage is in single digits by now, but (especially in the corporate environment) you often have to support that old POS, either for your own internal network or the client's. – Kon Mar 12 '11 at 14:57
@Kon - even in IE6, the problem can be worked around (you just have to use `` instead of `
`, because IE6 only allows `inline-block` on elements with a default style of `inline`... weird bug, but it can be stepped around)
– Spudley Mar 12 '11 at 15:46

score 0 · Answer 2 · answered Mar 12 '11 at 14:23

0

Have you heard of clearfix? That way you only have to specify the class name:

<div class="clearfix"></div>

answered Mar 12 '11 at 14:23

Kon

27,113
11
60
86

1

@Kon What's wrong with `overflow:auto`? – Šime Vidas Mar 12 '11 at 14:32
Nothing wrong with it - I use it all the time. Just not to clear floated content. :) Also, one major point of my answer is that there's no embedded styling in the markup, which is good practice to separate. – Kon Mar 12 '11 at 14:54
Because I'm awesome. Just kidding.. I don't know, I've used clearfix for quite a few years. I know the overflow solution you're talking about, but just happen to have used it. Perhaps I should revisit. – Kon Mar 12 '11 at 15:04
never* happen to have used it. – Kon Mar 12 '11 at 15:09
@Kon Yes, check it out. overflow:auto/hidden is clearly superior. – Šime Vidas Mar 12 '11 at 18:12

score 0 · Answer 3 · answered Mar 12 '11 at 15:53

0

I like <br /> for clearing floats, and in CSS, just add some classes:

br.left { clear: left; }
br.right { clear: right; }
br.both { clear: both; }

Works like a charm, and easy to implement - <br class="left" />.

answered Mar 12 '11 at 15:53

tomsseisums

13,168
19
83
145

score 0 · Answer 4 · answered Mar 12 '11 at 15:55

You dont need clearfix divs at all.

you should use overflow:auto;

http://jsfiddle.net/HharD/

<div id="container">
    <div id="left"></div>
    <div id="right"></div>
</div>

css

#container {width:200px;background:#faf;min-height:10px;overflow:auto;}
#left {width:100px;background:#fa0;float:left;height:100px;}
#right{width:100px;background:#09f;float:left;height:110px;}

better float clearing

4 Answers4