span to float right within a div

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • JackRbt
    New Member
    • Aug 2008
    • 22
    #1

    span to float right within a div

    I have a navbar in a div, with several links. The last one is in a <span> because I want it to float to the right by itself. The span does float right, but it shows up below the navbar div. I want it within the div.

    Is this doable? Thanks.

    Code:
    <?php

echo "<p>";
echo '<div id="navbar">
           <a href="edit_reg.php">edit</a> 
&nbsp;<a href="undelete.php">undelete</a>
&nbsp;<a href="print_reg.php">print</a>
&nbsp;<a href="rep_sum.php">summary</a>
<span style="float: right"><a href="index.php">reg page</a></span>
</div><p>';

?>
    Tags: None
    • JackRbt
      New Member
      • Aug 2008
      • 22
      #2
      I guess it's better to post the HTML output rather than just the PHP source:


      Code:
      <p>
<div id="navbar">
      <a href="edit_reg.php">edit</a> 
&nbsp;<a href="undelete.php">undelete</a>
&nbsp;<a href="print_reg.php">print</a>
&nbsp;<a href="rep_sum.php">summary</a>
<span style="float: right"><a href="index.php">reg page</a></span>
</div>

        Comment

        • David Laakso
          Recognized Expert Contributor
          • Aug 2008
          • 397
          #3
          See if this works for you...

          Code:
          CSS
#navlist li{
display: inline;
list-style-type: none;
padding-right: 20px;
}
.c1 {float:right;}


HTML

<div id="navcontainer">
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li class="c1"><a href="#">Item five</a></li>
</ul>
</div>

            Comment

            • JackRbt
              New Member
              • Aug 2008
              • 22
              #4
              Thanks, David. Unfortunately, that similarly drops down the right-floated item (in IE7 and FF2).

              I guess I'll have to live with it... or use a table.

                Comment

                • David Laakso
                  Recognized Expert Contributor
                  • Aug 2008
                  • 397
                  #5
                  Sorry. My bad!
                  Same HTML as in previous example with this CSS:

                  Code:
                  html, body {margin:0;padding:0;}
body {
font : 100% arial, sans-serif;
}
#navcontainer ul{
margin:0;
padding: 0;
}

#navlist li{
float:left;
padding-right:20px;
display: inline;
list-style-type: none;
}
.c1 {position:absolute;top: 0; right: 20px;}
                  Quick checked in IE/6, IE/7, Win FF/2.0.0.14, Mac FF3.0.1, Mac Safari, Mac Opera.

                    Comment

                    • JackRbt
                      New Member
                      • Aug 2008
                      • 22
                      #6
                      okay, thanks for conveying the concept of absolute positioning

                      I would have to fine tune the location by pixels, to match

                        Comment

                        • TomGKDesign
                          New Member
                          • Jan 2014
                          • 1
                          #7
                          Although it shows up "below", it is still part of your navbar DIV.
                          The solution is very simple. You need to do your floats first (both left and right) followed by your "middle bits".
                          If you move <span style="float: right">... from the end of the navbar DIV to the beginning of the DIV, then everything fits on one line the way you want.
                          Think of it this way: You can't introduce FLOAT content which causes previously-rendered content to be pushed out of the way.

                            Comment

                            • sudhakar1
                              New Member
                              • Jan 2014
                              • 15
                              #8
                              Hi,

                              Try to this html and css code
                              Code:
                              <style="text/css">

 #navlist li{
display: inline;
list-style-type: none;
padding-right: 20px;
}
.c1 {float:right;}

</style>
</head>
<body>

<div id="navcontainer">
<ul id="navlist">
<li><a href="undelete.php">undelete</a></li>
<li><a href="print_reg.php">print</a></li>
<li><a href="rep_sum.php">summary</a></li>
<li class="c1"><a href="index.php">reg page</a></li>
</ul>
</div>
</body>
</html>

                                Comment

                                Previous template Next
                                Working...