Jump to content


Photo

Navigation Bar Alignment Problem


  • Please log in to reply
1 reply to this topic

#1 Heero

Heero
  • Members
  • PipPipPip
  • Advanced Member
  • 50 posts

Posted 11 May 2006 - 07:06 AM

Hey guys,

Here is a screenshot of what I have right now:
[img src=\"http://www.sfu.ca/~fcc/navigation.gif\" border=\"0\" alt=\"IPB Image\" /]

Notice how there is a line between the first and second line. That is fine. How do the second link text align itself all the way to the right side? Like this:

[img src=\"http://www.sfu.ca/~fcc/navigation2.gif\" border=\"0\" alt=\"IPB Image\" /]

My current code is:

<div id="navContainer_1">
<ul id="nav">
<li><a href="index.php">主頁</a></li>
<li><a href="register.php">申請及退出</a></li>
</ul>
</div>

<div id="navContainer_2">
<ul id="nav">
<li><a href="index.php">主頁</a></li>
<li><a href="register.php">申請及退出</a></li>
</ul>
</div>

NavContainer1 simply has the attribute float: left. What attribute do I put in navContainer 2 to make the links go all the way to right side?
I'm learning PHP and mySQL. Please forgive my ignorance :(

#2 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 11 May 2006 - 08:33 AM

float right and give both div containers the width of 49% so they both sit sibe by the side of each other nicely.

This is the css you'll want:
#navContainer_1, #navContainer_2 {
    width: 49%;
    float: left;
}

#navContainer_2 {
    float: right;
    text-align: right;
}





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users