Question

i am trying to make a menu of sorts.

the code is available here:
http://jsfiddle.net/Chumillas/WyA3U/
(thank you Chumillas for teaching me about this)

if you check the result via the link above, you will see that there is a design issue with this code – all visible menu items have to have the same length (75px) and this does not look beautify as the distances between them are uneven:

.titleCell
{
    width: 75px;

how can i fix it so that the length is actually that of the content (+padding) instead of having to fix it to 75px so that the distances between the menu items are THE SAME?

• edit —

if it can not be done, i would be happy with a link to a similar thing online. thnx again

• edit 2 —

if anyone wonders where i got this thing originally from: http://www.devinrolsen.com/css-hide-and-display-content/

Answer 1

You can remove position:absolute from .titleCell strong and change the padding-left to padding-right with a bigger value, something such as 40px. Also remove the width from .titleCell

Here a demo: http://jsfiddle.net/ktCb8/

As an advise, don’t apply rules for strong tag. Style the parent div or the parent li.