replace the clear:both with pseudo class

Question

Previously, when I had floatings blocks, and i will stop the float, i used ;

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

But now, i'm solve this problem with pseudo class :

.last_floating_div:after {
 content: ""; 
 display: table;
 clear: both;
}

I has always works perfectly. But today... It doesn't work... ! Look at this clear example : http://jsfiddle.net/YsueS/2/

I know my problem is a total beginner problem. I have sold this problem so many times... I really don't understand why it doesn't work here !

Many thanks all of you !

Thanks Josh, the result is perfect ! In this case, the solution of JoshC seems to be more lightweight, but I keep your solution for further needs :) — Damien, Oct 31 '13 at 20:00
No problem! Overflow is the most basic and widely used way to achieve this. You can also use `overflow: auto` for absolute elements I believe. — Josh Powell, Oct 31 '13 at 20:03

score 3 · Accepted Answer · answered Oct 31 '13 at 19:42

3

Sure - you could clear it via an :after clearfix, however the most optimal, lightweight solution would just be to set overflow:hidden on the parent, achiving the desired effect with much less coding.

#mention {
    overflow: hidden;
}

jsFiddle here

To answer the question directly though, you should have applied the :after clearfix to #mentions - the parent, instead of the child.. jsFiddle here it works.

answered Oct 31 '13 at 19:42

Josh Crozier

233,099
56
391
304

`overflow: hidden;` would be the best answer for older IE right? – Josh Powell Oct 31 '13 at 19:44
1

Thank you ! You're right, in this case, overflow is really lightweight than pseudo class :) – Damien Oct 31 '13 at 20:00

score 1 · Answer 2 · answered Oct 31 '13 at 19:43

1

I think you need a #mention:after to do what you are looking for.

For Instance,

#mention:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
#mention { display: inline-block; }

* html #mention{ height: 1%; } /* for older ie */
#mention { display: block; }

WORKING DEMO

Hope this helps.

answered Oct 31 '13 at 19:43

Nitesh

15,425
4
48
60

Nope. Answers for genuine cross browser compatibility :) - @Jawad – Nitesh Oct 31 '13 at 19:48
But check my fiddle and do it practically to get a confirmation too. Thx for the +1 - @Jawad – Nitesh Oct 31 '13 at 19:49
cool @Nathan Lee. +1 to your question. There are only three things that you can do. Clearfix @ extra markup, Overflow: auto @ no support for old browsers, I forgot the third one. – Jawad Oct 31 '13 at 19:52
1

I suggest some extra mark up for complete browser compatibility is an ideal way. - @Jawad – Nitesh Oct 31 '13 at 19:54
yeah but the fanatics for semantic web always have a good case against it. but you real question is why it does not work in your case? – Jawad Oct 31 '13 at 19:55

score 1 · Answer 3 · answered Oct 31 '13 at 19:44

1

If you just add the :after to the id mention you will get the desired effect.

#mention:after {
  content: "";
  display: table;
  clear: both;
}

JSFIDDLE

answered Oct 31 '13 at 19:44

Josh Powell

6,219
5
31
59

replace the clear:both with pseudo class

3 Answers3

Linked