1 Reply Latest reply on Feb 22, 2010 1:52 AM by osgood_

    How to create 2 horiz nav bars side by side using div & css?

    InJoy! Level 1

      I am trying to place separate left and right navbars side by side horizontally.  The div tag for the second/right hand side nav bar wants to go under the first rather than beside it.  Each navbar is to be 350 px wide.

       

      I am new at DW, so if you show me what to do in the code, please be basic and specific.

       

      I am creating the nav bars following the great instructions in the DW for Dummies book, page 179: 1) First, place curser in page where I want nav bar to appear and click the DIV button in Insert Panel; 2) then name in ID field... 

       

      This is where I can't get the curser to go to the right of the existing Left hand side navbar already created with a div tag and css.

       

      Thanks for your help.  I am creating an e-commerce site with podcasting.  I want to make the nav bars for the e-commerce separate from the podcasting nav bar, and make them horizontal across the top of the whole page to reflect the layout of the site.

        • 1. Re: How to create 2 horiz nav bars side by side using div & css?
          osgood_ Level 8

          InJoy! wrote:

           

          This is where I can't get the curser to go to the right of the existing Left hand side navbar already created with a div tag and css.

           

           

           

          It won't go next to the one you currently have on your page UNTIL you style both <divs> with css which should happen later on in the tutorial.

           

          You place elements side by side by 'floating' them with css.

           

          For instance:

           

          <div id="left_navigation">A set of links go here.</div>

          <div id="right_navigation">Another set of links go here.</div>

           

          will look like (below) in Dreamweaver design view UNTIL you style them with css

           

          A set of links go here.

          Another set of links go here.

           

           

          tell the links to sit side by side using the css 'float' attribute:

           

          #left_navigation {

          width: 350px;

          float: left;

          }

           

          #right_navigation {

          width: 350px;

          float: left;

          }

           

          and they will look like:

           

          A set of links go here. Another set of links go here.