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.

Expand|Select|Wrap|Line Numbers

 <?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>';
 
?>

Aug 22 '08 #1

Subscribe Post Reply

25748

JackRbt

I guess it's better to post the HTML output rather than just the PHP source:

Expand|Select|Wrap|Line Numbers

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

Aug 23 '08 #2

David Laakso

397

Expert 256MB

See if this works for you...

Expand|Select|Wrap|Line Numbers

  
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>

Aug 23 '08 #3

JackRbt

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

 
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.

Aug 23 '08 #5

JackRbt

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

TomGKDesign

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

sudhakar1

Hi,

Try to this html and css code

Expand|Select|Wrap|Line Numbers

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

Jan 30 '14 #8

by: JKenyon | last post by:

I am attempting to display two images on a web page. The second "image" is actually two images, one overlaid on the other. The first one is aligned on the left using float:left. I have enclosed...

HTML / CSS

Why does float:right cause a line break ?

by: leegold | last post by:

Why does float:right cause a line break? Try the code below. Is there a fix? I want the link on the same line as the text. Thanks <html> <head> <STYLE> span.linkpos { float:right; clear:...

HTML / CSS

inline float right, but not down?

by: Michael Shell | last post by:

Greetings, I've been playing with CSS inline floats of <span> elements and the results are not quite what I would expect. In the example attached at the end of this post, I would expect the...

HTML / CSS

float: right

by: Oliver Block | last post by:

Hello everybody, I wonder why a <span style="float:right">some text</span> might be displayed out of a surrounding div element. It is shifted to the next line. I thougt it is supposed to...

HTML / CSS

float:right goes to next line

by: ashkaan57 | last post by:

Hi, I am trying to put text on left and right side of the page and used: <div> <span>blah blah</span> <span style="float:right">blah blah</span> </div> The 2nd text does go to the right but the...

HTML / CSS

How to float a menu on the right within a div?

by: bogdan | last post by:

Hi, I have a div to provide a background image for a menu. I'd like to position the menu on the right side but I can't seem to find a right way of doing it. The only way the menu will move to...

ASP.NET

Span shifts down when float=right

by: paragpdoke | last post by:

Hello All. I have a weird observation regarding the CSS float style for span. Allow me to share details before asking my question: Screen resolution: 1024x768 (I know my monitor is outdated; it...

HTML / CSS

Problem with line height when using <span> and "float:right"

by: luftikus143 | last post by:

Hi there, I am building a small WebApp, and using a list to display country values for a specific variable. It should be like Country A 10 Country B 4 Country...

HTML / CSS

problem with width of <ul> when <ul> float left and <li> float right

by: Chinsu | last post by:

<html> <head> <style> #ex { width: 700px; background: red; float: left; } a, span { display: block;

HTML / CSS

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

span to float right within a div

Similar topics