Problem with clearfix

HTML & CSS
1

Hi I’ve applied ‘clearfix’ to a form element in order to contain al it’s floats, i.e. so that it’s as high as all the floats it contains.

Trouble is that it takes on the hight of a floating element that 's outside it. I’m confused, what’s going on?

I’d be grateful if you could have a look at th following link.

The ASIDE element is a floated element outside the SECTION. The FORM inside SECTION has class=“clearfix”, but this makes it as high as ASIDE.

http://stage.truedesign.electra-2.titaninternet.co.uk/arp/subscribe

I’ve also tried put <div class=“clearfix”></div> just before the </FORM> closing tag, with the same result.

Thank you for any ideas here.

2

I can’t quite tell what you are trying to achieve here, or why the form needs clearfix at all. If I remove it, everything seems to work fine. Can you give some kind of idea of what you want the layout to look like?

3

Hi Ralph, thanks for looking.

If you type anything but an email address into the form it will generate an error message under the form, which ‘sticks out’ of the form container. I want this to be contained within the FORM, or an enclosing DIV or so.

(Remove the ‘clearfix’ class and, type something into the field, other than an email address, and then leave it). It’s then obvious that it sticks out and interferes with the content below.)

However, if I try to make the enclosing FORM (or a div) as tall as the floated contents it takes the height of the ASIDE element…

4

Ah, I see. Remove the clearfix class and the clearing div and try putting overflow:hidden on the form instead.

5

Fabulous! That worked.

Could you briefly explain why (or point to an explanation somewhere online)?

6

Overflow: hidden is a common trick for forcing a container to wrap around its floated content. I can’t quite remember now what was happening before, but I think it was the “clear: both” on the clearfix class that was getting in the way in this instance. Normally if one float containing method causes a problem, I just use another. :slight_smile: There are lots of pages online that detail the various containing methods, but here’s one I did a while back:

7

Thanks for your kind reply! All the best.