The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Horizontal Nav is going vertical Re: Horizontal Nav is going vertical


At a quick glance, it’s more than likely either
your ‘display’ property is set incorrectly (try setting it to BLOCK)
the ‘float’ property is set incorrectly (make sure you set it to
the width of your list item container is incorrect – make the parent container wider so the list items have room to flow properly.

Below is a snippet from some code (html5 format) on one of my sites – use it as a template..

header nav { width: 100%; overflow: hidden; }
header nav li { width: 200px; float: left; margin: 10px; list-style-type: none; white-space: normal; text-align: center; }
header nav li a { display: block; }