Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Floatitis Pt2 : Using CSS Text-Align

DZone's Guide to

Floatitis Pt2 : Using CSS Text-Align

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

In my previous article on floats I explained the back story of the float. As promised, the next couple of articles will list alternative methods to avoid the use of the float property where possible. None of these methods are fool proof, they all have their own advantages and disadvantages and in the end there will be no effective cure against the abuse of floats. But hopefully, you'll have a few more tools to avoid problems.

Kiss

css is considered to be difficult, but we don't always make it easy on ourselves either. The float property is usually acquired pretty early on in the css learning process and is considered to be one of the only tools to position elements. Sadly, other options are never learned, often overlooked or even completely forgotten. And so, we end up with clearfix littered html code and browser bugs everywhere.

The first alternative I'll present is extremely easy and transparent. Introducing the powerful and incredibly simple css property: text-align.

Using Text-Align

.more {text-align:right;}  
.more a {...}

The use of text-align is pretty limited as an alternative for the float, but there are a fair few well-defined examples where it can really help you out.

The text-align property works on inline content, so don't expect to start positioning whole blocks of content using it. On the other hand, it is pretty useful for positioning small pieces of inline content. The example given above is ideal for 'more >' links and similar cases. These kind of links are often positioned to the right of the content. You have several options to get them there, including floating the <a> tag (which will result in clearfixing the parent element).

To make this solution work well using the text-align property, it's best to add an extra structural element (the .more class referenced in the css). It is possible to set the <a> tag itself to display:block; but that will influence the click area of your link in less than favorable ways. I usually add an extra div element around the link, which is actually nothing to be ashamed of. It does the trick and brings some added structural relevance.

That's all there is to it really, just add a text-align property on your parent element and the inline context will position itself accordingly. Much easier than floating, no?

Conclusion

Next time you have to position a simple link or small snippet of inline content, consider using the text-align instead of a float property, even if it requires a little extra markup. From a structural point of view the mark-up won't hurt (as it has structural relevance) and possible float issues can be avoided.

It's a simple method, it requires little skill to use, it's browser proof, but often you see people still reaching for the float property. Hopefully this will change some day.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Niels Matthijs, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}