473,698 Members | 2,943 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

float: right

Hello everybody,

I wonder why a

<span style="float:ri ght">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 appear inside the surrounding div. There is
definetly enough space.

tia,

Oliver

May 9 '06 #1
5 4917
Oliver Block wrote:
Hello everybody,

I wonder why a

<span style="float:ri ght">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 appear inside the surrounding div. There is
definetly enough space.

tia,

Oliver


Not true. You did not have sufficient content in the div. Without
commenting on your method, try this

<div>Here is a bunch of text<span
style="float:ri ght;color:#f00; width:50px;">fl oated text</span> but some
text has been floated right that goes on and on that goes on and on that
goes on and on that goes on and on that goes on and on that goes on and
on that goes on and on that goes on and on that goes on and on that goes
on and on that goes on and on that goes on and on that goes on and on
that goes on and on that goes on and on that goes on and on that goes on
and on that goes on and on that goes on and on that goes on and on that
goes on and on that goes on and on that goes on and on that goes on and
on that goes on and on that goes on and on that goes on and on that goes
on and on
</div>

Now shift the <span> object to the start of the div content.

Louise
May 10 '06 #2
boclair wrote:
I thougt it is supposed to appear inside the surrounding div. There is
definetly enough space.


Not true. You did not have sufficient content in the div. Without
commenting on your method, try this


Why is that? I changed

<div style="width:10 0%"><a href="prev.html ">prev</a><span
style="float:ri ght;"><a href="next.html ">next</a></span></div>

to:

<div style="width:10 0%"><span style="float:ri ght;">
<a href="next.html ">next</a></span><a href="prev.html ">prev</a></div>

There is enough room!?

May that be a specialty of firefox? I did get no difference with Konqueror
(KDE) when I tried your code.

Thanks,

Oliver

May 10 '06 #3
To further the education of mankind, Oliver Block
<ne********@blo ck-online.eu> vouchsafed:
boclair wrote:
I thougt it is supposed to appear inside the surrounding div. There
is definetly enough space.


Not true. You did not have sufficient content in the div. Without
commenting on your method, try this


Why is that? I changed

<div style="width:10 0%"><a href="prev.html ">prev</a><span
style="float:ri ght;"><a href="next.html ">next</a></span></div>

to:

<div style="width:10 0%"><span style="float:ri ght;">
<a href="next.html ">next</a></span><a href="prev.html ">prev</a></div>

There is enough room!?

May that be a specialty of firefox? I did get no difference with
Konqueror (KDE) when I tried your code.


In the first case you're floating (right) around nothing. In the second,
you're floating around the "prev" link.

--
Neredbojias
Infinity has its limits.
May 10 '06 #4
Oliver Block wrote:

<div style="width:10 0%"><span style="float:ri ght;">
<a href="next.html ">next</a></span><a href="prev.html ">prev</a></div>

There is enough room!?

Try this:
#pager {
padding: 0.5em;
margin: 1em auto;
border: 1px solid red;
width: 90%;
}

<div id="pager">
<span style="float:ri ght;"><a href="next.html ">next</a></span>
<a href="prev.html ">prev</a>
</div>

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
May 10 '06 #5
Neredbojias wrote:
To further the education of mankind, Oliver Block
<ne********@blo ck-online.eu> vouchsafed:
boclair wrote:
I thougt it is supposed to appear inside the surrounding div. There
is definetly enough space.
Not true. You did not have sufficient content in the div. Without
commenting on your method, try this

Why is that? I changed

<div style="width:10 0%"><a href="prev.html ">prev</a><span
style="float:ri ght;"><a href="next.html ">next</a></span></div>

to:

<div style="width:10 0%"><span style="float:ri ght;">
<a href="next.html ">next</a></span><a href="prev.html ">prev</a></div>

There is enough room!?

May that be a specialty of firefox? I did get no difference with
Konqueror (KDE) when I tried your code.


In the first case you're floating (right) around nothing. In the second,
you're floating around the "prev" link.


Exactly. Floats are declared before the object that they are floated
around in the general case. Mozilla renders correctly and is not the
special case.

Having a width rule on a float set is good! practise.

Since the reason why is asked perhaps look at this.

_____start_____

<!-- left floated div -->
<div style="float:le ft;width:4em;bo rder:1px solid #000;">left text</div>

<!-- right floated div -->
<div style="float:ri ght;width:4em;t ext-align:right;bor der:1px solid
#000;">right text</div>

<!-- div in flow -->
<div style="width:4e m;margin:auto;t ext-align:center;bo rder:1px solid
#000;">centre text</div>

_____end_______ _

and see http://www.w3.org/TR/REC-CSS2/visuren.html#floats and the Meyer
test suites at http://www.meyerweb.com/eric/css/tes...ec09-05-01.htm

Louise
May 10 '06 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
4314
by: Penguinny | last post by:
Dear all, I am trying to make a relatively simple layout with two adjustment columns filled with short news pieces, but there's a catch. I cannot control the html for these news bits, so I am left with CSS only for positioning etc. My problem is the following. The most natural way to do what I want is to use "float: left" (or "float: right") for my news bits and see them all filling the space. However, there's the catch: if the news...
2
5710
by: Dr. Richard E. Hawkins | last post by:
I've googled around, and asked everyone I know, but I still can't find any reference to anyone else having faced this particular IE bug with floats. I've put a page at http://dochawk.org/sample.html . This was made by stripping out the google ads from the regular pages. It validates as strict 4.01 at http://validator.w3.org. (The google ads drive it nuts!) The main (right) column is made with alternating left and right floats to...
6
5343
by: Jim Lawton | last post by:
I am trying to achieve a simple page layout using only divs and css. I know that people bad mouth IE for non-conformance, but in this case IE's(6.0)behaviour is entirely the way I expect, and Gecko (Firefox/1.0) is, well, not. I have a left menu div, and a right content div, float left, the width of which is auto. My intention is that the content should fill the space to the right of the menu. In IE putting a float right div in the...
11
3785
by: Joriveek | last post by:
I have a float variable like 123456789 I want to right truncate this and only display say only 8 right most values all the time or otherwise filled by zeros if it is less than 8 digits, do you know how can i display this? Thanks J.
0
2046
by: jonipony | last post by:
HELP: Float Left box is drifting to the right in ie! -------------------------- I need som HELP with my CSS coding! On the following web page my design falls apart at screen size 800 x 600 (looks fine at larger screen sizes) when the left menu box that should float left is drifting to the right in Internet Explorer 6.0 (it doesn't drift to the right in Netscape 7.1).
3
1765
by: hantechs | last post by:
<html> <body> <p style="width:30%;">text1</p> <p style="float:left;">text2</p> </body> </html> The effect of this html code is : text1 and text2 each is on a line. My question is: Why text2 is positioned on the right of text1? Because the CSS2.1 said: A floating element must be placed as high as possible; A left-floating element must be put as far to the left as possible; A
22
51527
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 next line. What am I doing wrong? TIA.
5
15578
by: John | last post by:
Hi Suppose I want a header containing an image floated left and a list of horizontal links floated right. So I float the image left. I then do the following with the list: ul = float: right li = display: inline li a = display: block; float: left
27
3866
by: GloStix | last post by:
WARNING VIDEO TAKES A WHILE TO LOAD http://screencast.com/t/BWQ6DNtsM I really don't know how to fix this other than putting another div. But I dont' exactly want to do that for every page. random div's everywhere Is there any other way? Also I'm trying to get a scaled thumbnail of the orginal picture WHILE maintaining the size of the css box.. Is that possible? Or do I have to scale it in Photoshop and make a separate image =\
0
8683
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8610
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9170
Oralloy
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9031
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
8873
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7740
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6528
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4372
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3052
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.