469,285 Members | 2,588 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,285 developers. It's quick & easy.

span to float right within a div

22
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.

Expand|Select|Wrap|Line Numbers
  1. <?php
  2.  
  3. echo "<p>";
  4. echo '<div id="navbar">
  5.            <a href="edit_reg.php">edit</a> 
  6. &nbsp;<a href="undelete.php">undelete</a>
  7. &nbsp;<a href="print_reg.php">print</a>
  8. &nbsp;<a href="rep_sum.php">summary</a>
  9. <span style="float: right"><a href="index.php">reg page</a></span>
  10. </div><p>';
  11.  
  12. ?>
Aug 22 '08 #1
7 24540
JackRbt
22
I guess it's better to post the HTML output rather than just the PHP source:


Expand|Select|Wrap|Line Numbers
  1. <p>
  2. <div id="navbar">
  3.       <a href="edit_reg.php">edit</a> 
  4. &nbsp;<a href="undelete.php">undelete</a>
  5. &nbsp;<a href="print_reg.php">print</a>
  6. &nbsp;<a href="rep_sum.php">summary</a>
  7. <span style="float: right"><a href="index.php">reg page</a></span>
  8. </div>
  9.  
Aug 23 '08 #2
David Laakso
397 Expert 256MB
See if this works for you...

Expand|Select|Wrap|Line Numbers
  1.  
  2. CSS
  3. #navlist li{
  4. display: inline;
  5. list-style-type: none;
  6. padding-right: 20px;
  7. }
  8. .c1 {float:right;}
  9.  
  10.  
  11. HTML
  12.  
  13. <div id="navcontainer">
  14. <ul id="navlist">
  15. <li><a href="#">Item one</a></li>
  16. <li><a href="#">Item two</a></li>
  17. <li><a href="#">Item three</a></li>
  18. <li><a href="#">Item four</a></li>
  19. <li class="c1"><a href="#">Item five</a></li>
  20. </ul>
  21. </div>
  22.  
  23.  
  24.  
  25.  
Aug 23 '08 #3
JackRbt
22
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.
Aug 23 '08 #4
David Laakso
397 Expert 256MB
Sorry. My bad!
Same HTML as in previous example with this CSS:

Expand|Select|Wrap|Line Numbers
  1. html, body {margin:0;padding:0;}
  2. body {
  3. font : 100% arial, sans-serif;
  4. }
  5. #navcontainer ul{
  6. margin:0;
  7. padding: 0;
  8. }
  9.  
  10. #navlist li{
  11. float:left;
  12. padding-right:20px;
  13. display: inline;
  14. list-style-type: none;
  15. }
  16. .c1 {position:absolute;top: 0; right: 20px;}
  17.  
Quick checked in IE/6, IE/7, Win FF/2.0.0.14, Mac FF3.0.1, Mac Safari, Mac Opera.
Aug 23 '08 #5
JackRbt
22
okay, thanks for conveying the concept of absolute positioning

I would have to fine tune the location by pixels, to match
Aug 24 '08 #6
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.
Jan 1 '14 #7
Hi,

Try to this html and css code
Expand|Select|Wrap|Line Numbers
  1. <style="text/css">
  2.  
  3.  #navlist li{
  4. display: inline;
  5. list-style-type: none;
  6. padding-right: 20px;
  7. }
  8. .c1 {float:right;}
  9.  
  10. </style>
  11. </head>
  12. <body>
  13.  
  14. <div id="navcontainer">
  15. <ul id="navlist">
  16. <li><a href="undelete.php">undelete</a></li>
  17. <li><a href="print_reg.php">print</a></li>
  18. <li><a href="rep_sum.php">summary</a></li>
  19. <li class="c1"><a href="index.php">reg page</a></li>
  20. </ul>
  21. </div>
  22. </body>
  23. </html>
  24.  
Jan 30 '14 #8

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

9 posts views Thread by leegold | last post: by
3 posts views Thread by Michael Shell | last post: by
5 posts views Thread by Oliver Block | last post: by
22 posts views Thread by ashkaan57 | last post: by
1 post views Thread by bogdan | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.