blocks are displaying on different rows

[TeddyKiller]

I have this..

          <a class="menu-root" href="##" style="display:none;">Toggle Menu</a>
      
               <div id="menu">
               <a href="##">Here is a menu item</a>
               <a href="##">Here is a menu item</a>
               <a href="##">Here is a menu item</a>
               <a href="##">Here is a menu item</a>
               <a href="##">Here is a menu item</a>
               <a href="##">Here is a menu item</a>
               </div>
  
          <a class="menu-root" href="/">Login</a> 
          <a class="menu-root" href="?action=register" style="margin-left:10px;">Register</a>

 

With the css of..

.menu-root {
    background-color: #E8E8E8 ;
    border: 1px solid #D0D0D0 ;
    color: #000000 ;
    display: block ;
    height: 22px ;
    line-height: 22px ;
    text-align: center ;
    text-decoration: none ;
    width: 105px ;
}   

 

All the blocks/a links end up underneath each other.

How can this be prevented?

[ferdi]

Well, it might be a width error.

 

I'd try setting a width to the div container, or alternatively you could embed those link in a table.

[isedeasy]

Your best of using an unordered list for your navigation.

 

Lots of examples can be found here.