span to float right within a div
Question posted by: JackRbt
(Newbie)
on
August 22nd, 2008 09:58 PM
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.
- <?php
-
-
echo "<p>";
-
echo '<div id="navbar">
-
<a href="edit_reg.php">edit</a>
-
<a href="undelete.php">undelete</a>
-
<a href="print_reg.php">print</a>
-
<a href="rep_sum.php">summary</a>
-
<span style="float: right"><a href="index.php">reg page</a></span>
-
</div><p>';
-
-
?>
5
Answers Posted
I guess it's better to post the HTML output rather than just the PHP source:
-
<p>
-
<div id="navbar">
-
<a href="edit_reg.php">edit</a>
-
<a href="undelete.php">undelete</a>
-
<a href="print_reg.php">print</a>
-
<a href="rep_sum.php">summary</a>
-
<span style="float: right"><a href="index.php">reg page</a></span>
-
</div>
See if this works for you...
-
-
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>
-
-
-
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.
Sorry. My bad!
Same HTML as in previous example with this CSS:
-
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.
okay, thanks for conveying the concept of absolute positioning
I would have to fine tune the location by pixels, to match
|
|
|
What is Bytes?
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over 197,049 network members.
Top HTML / CSS Contributors
|
