Mobile Friendly Website


Doing it with style

CSS MENUSCentering float:left; menus

Date : 10th April 2007

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.


More requests asking 'how do I center float:left; menus on my page'.

As with the previous 'sliding doors' menu this requires two different methods, one for Firefox, Opera, Safari, etc., and of course another for IE (including IE7).

Non-IE browsers use display:table and table-cell, whereas IE uses display:inline-block and display:inline.

We use display:inline-block; but then declare display:inline; becauset IE only recognises the inline-block style on inline elements. Try leaving out the display:inline; in the IE style to see what happens.

I have moved the IE only style into conditional comments which target all IE versions less than and equal to IE7, you never know IE8 may work with display:table; and also to make the css validate as the validator does not yet recognise display:inline-block; as a valid style.

This menu uses two very small 2 x 2 pixel gifs for the bottom left and bottom right corners.

The left corner image x10 bottom left corner the red background has been added so that you can see the transparent image.

The right corner image x10 bottom right corner the red background has been added so that you can see the transparent image.

Oh, and you can click any tab to reload the page with that tab made 'current'.

You may use this method on your personal 'non-profit' web site without seeking my permission.
A link back to CSS PLAY is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSS PLAY.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced.
Please email me for more information.


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page