SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with clearfix

    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.ti.../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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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. #3
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Ah, I see. Remove the clearfix class and the clearing div and try putting overflow:hidden on the form instead.

  5. #5
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fabulous! That worked.

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

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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. There are lots of pages online that detail the various containing methods, but here's one I did a while back:

    http://pageaffairs.com/notebook/containing-floats

  7. #7
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your kind reply! All the best.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •