best CSS practice for a footer

[magician11]

Hi there,

At the bottom of this page http://www.mynaturopathchristos.com/

I have 2 bits of info

1) copyright info
2) website creator

I’ve done it with
<div class="footer-info">
<div id="website-creator">Website created by <a href="http://www.golightlyplus.com">the team at Golightly+</a>
</div>
<div id="mnc-copyright">
© My Naturopath Christos 2013
</div>
</div>

and CSS

`/* format footer area */
.footer-info {
width: 888px;
}

website-creator {

float: right;
}`

Is there a better way to do it? Should “footer-info” be an ID instead of a class as it is unique?

Something seems broken around there so just want to check the above first http://validator.w3.org/check?uri=http%3A%2F%2Fwww.mynaturopathchristos.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices

thank you,
Andrew

[jurotek]

You have div inside the p tag, which is not allowed, that’s why it does not validate. Use div with display inline block for each copyright and created by and float one left and the other right.

[Paulie_D]

Although I agree about not using fixed widths, I don’t have a problem with extra divs…they are semantically neutral.

Any text though should be wrapped in Text tags ( p / span etc) otherwise it’s not really targetable directly so the solution above is a good one also although not as responsive if you wanted the paragraphs to stack at lower viewport widths.

http://codepen.io/Paulie-D/pen/mhxDB

The stacking can be done with a media query when required.

My preference is not to use IDs unless I have to so classes is preferable for selection if required.

[Paulie_D]

Oh, I agree that mobile first would have been optimal.

I prefer classes to p+p (or #footer p + p etc), it’s easier for me but I know it’s not the only option.

If I have 5 paragraphs it could get difficult but each to their own.

I’m not fussed about anyone looking at my HTML. It’s only going to be another developer doing so and at least if I have a class attached they know instantly where to look….but as I said, it’s a personal choice.

[magician11]

Thanks guys. I love the mobile first layout.

I’ve put that code in from @tomasz86 as I like minimal code too.

Something breaks though.. I’m guessing that’s because of some media query from the theme? Have a look again at http://www.mynaturopathchristos.com/ by resizing the page.

Also @tomasz86 I’m trying to get my head around all the different display values. To help me understand better, why did you choose display: table-cell over any other display value?

[Paulie_D]

I should say that my preferred “positioning” method in these cases is ‘inline-block` rather than floats….I just picked the other way this time.

[magician11]

Perfect @tomasz86 works great.

[Author]

Posts