Height of the footer element

[francishunger]

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?

[wolfcry911]

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.

[Andy Howells]

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/

[francishunger]

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

[tomrogers123]

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.

[Paulie_D]

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?

[francishunger]

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

[wolfcry911]

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).

[francishunger]

Thanks for confirming this and thanks to everybody who replied.

[theacefes]

@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. :)

[tomrogers123]

@theacefes He also did: https://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/

[Paulie_D]

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

[Paulie_D]

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

I was close. :)

[Author]

Posts