Instructions

This page suffers from both "splintering" and "overlapping" of the menu items when the width of the container (the box with a red border) is smaller than the total width of the menu. To view the effect resize your window to less than 900px wide. « Back to article

Hello from us

Here is some dummy content for the page to make it feel a little more realistic. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque at risus. Nulla nonummy ipsum a ante. Fusce sit amet diam a metus venenatis sollicitudin. In hac habitasse platea dictumst. Sed pede justo, condimentum et, interdum eu, pulvinar sit amet, tellus. Aliquam nec est. Duis sollicitudin lorem pretium erat gravida fermentum. Donec mollis nisl porttitor lectus. Vivamus auctor velit sit amet nulla. Phasellus scelerisque tortor euismod enim.

Mauris vitae quam sit amet nisl volutpat mattis. Nulla massa. Vestibulum eget risus sit amet magna ullamcorper nonummy. Nunc ullamcorper dolor eget mi. Aenean consectetuer ornare magna. Nam at velit. In rhoncus pede sed est. Fusce et nisl ac eros gravida rhoncus. Integer et mi. Integer felis.

This is an example page published at www.jmcquarrie.co.uk

Hello. You are currently viewing an example page at www.jmcquarrie.co.uk. This page was put here to illustrate a CSS problem described in CSS tip:- Using whitespace: nowrap and line-height on horitzonal lists to stop splintering and overlapping published on the 18 of October 2007.