We often have situations where we have elements sitting side by side in the design of a website and CSS has provided us with an easy way to achieve this using the float attribute. A common example might be the navigation on a website.

Now what if we wanted the nav items to sit on the right hand side of the page? Well we could float the whole thing to the right, applying “float: right;” to the ul element but that may have further implications with regards to the surrounding elements. We could change the CSS we applied to the list items to float them right instead of left, however this will reverse the order of the list items.

So onto the solution. With all current browsers providing support for the inline-block property, we can now use this to solve our problem instead of having to float the elements. Applying “display: inline-block;” will place all the elements in a row in the order provided. The group of block level elements are now treated as if they are inline elements so to get them to align to the right, all we need to do is apply the CSS attribute “text-align: right;”