Grow your CSS skills. Land your dream job.

Height of the footer element

  • # February 20, 2013 at 6:22 am

    Hi,

    I thought in HTML5 the height of the footer-element would be determined by the height of its contents, so when I have let’s say 3 divs within the footer tag, the heighest div would devine the footer height.

    But it isn’t so. What should I look for?

    # February 20, 2013 at 6:48 am

    my best guess without seeing any code (hint) is that the children are either floats or AP. If AP you need to define the height of the footer. If floats, you need to contain them.

    # February 20, 2013 at 7:04 am

    If you haven’t specified a footer height then you’re probably not clearing your floats if the footer is collapsing. As a simple test add overflow: hidden; to your footer element.

    To properly clear checkout http://nicolasgallagher.com/micro-clearfix-hack/

    # February 20, 2013 at 9:08 am

    Thanks a lot, the .clearfix ist the solution. Which also means it doesn’t relate to HTML5 and CSS3, right?

    # February 20, 2013 at 9:22 am

    Could you post your code somehow please so we are able to troubleshoot in our own browsers?

    Unless you are using an unsupported browser (where it will `display: inline`) the fact you’re using the footer element shouldn’t make any difference as it will just be treated like any other block-level element.

    # February 20, 2013 at 9:27 am

    I’m expecting this to be another absolute position issue.

    Is there no way we can stop n00bs using this?

    Where are they getting this from…. old articles?

    # February 20, 2013 at 1:03 pm

    See http://codepen.io/anon/pen/pBcEy The footer element should have a gray background

    # February 20, 2013 at 1:14 pm

    Not an html5 or css3 problem. As stated, the floats need to be contained. The clearfix method and overflow: hidden; are both viable options (clearfix is no more _proper_ than overflow).

    # February 20, 2013 at 1:47 pm

    Thanks for confirming this and thanks to everybody who replied.

    # February 20, 2013 at 2:04 pm

    @Paulie_D Maybe we can convince Chris to do an article on the dos and don’ts of absolute positioning if he hasn’t already. :)

    # February 20, 2013 at 6:01 pm

    @theacefes If memory serves me correct, Chris has already created a screencast in which he covers, albeit circuitously, the position property values.

    Perhaps it was this video: http://css-tricks.com/video-screencasts/42-all-about-floats-screencast/.

    # February 21, 2013 at 8:06 am

    Yeah…but that’s just explaining how they work…not why (IMO) it’s a bad idea to use positioning for general layout.

    As I have maintained…there are occasions when positioning is the only way to go….but I don’t feel it should be the default ‘go-to’.

    That’s why I wondered why I see so many newcomers to HTML/CSS asking for help when they have started their first project with it.

    Is it like Chapter 3 of the ‘Web Design for Dummies’ and they haven’t read any further to find out about document flow and other options?

    I dunno…I just feel that (again IMO)…it starts them off with bad practices right out of the date.

    2c

    # February 21, 2013 at 8:11 am

    Apparently it’s actually Chapter 2 of **CSS Web Design for Dummies**

    I was close. :)

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".