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

Home Forums CSS Horizontal Nav is going vertical

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #32568

    I have navation on this site which when viewed in older browsers like FF 3.0 and earlier versions of Chrome and IE, the navigation will go from horizontal across the page to a vertical state.


    what browser are you seeing it as horizontal? Latest versions of Safari, FF, Chrome, Opera all showing it vertical for me. Having a width of 100px on your nav might be the issue. Try making it wider.


    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; }
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.