473,847 Members | 1,698 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

question about float

<html>
<body>
<p style="width:30 %;">text1</p>
<p style="float:le ft;">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
higher position is preferred to one that is further to the right or
left. If text2 was positioned on the right of text1, I cannot see any
conflict with the rules for floated element.
Seems a silly question. Can somebody give me hints? Thanks.

Aug 26 '06 #1
3 1773
On 26 Aug 2006 05:04:04 -0700, "ha******@gmail .com" <ha******@gmail .com>
wrote:
<html>
<body>
<p style="width:30 %;">text1</p>
<p style="float:le ft;">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
higher position is preferred to one that is further to the right or
left. If text2 was positioned on the right of text1, I cannot see any
conflict with the rules for floated element.
Seems a silly question. Can somebody give me hints? Thanks.
Try putting the float:left paragraph before the other. I think the
browser has to know about all the float stuff before it encounters the
other stuff.

--
Steven
Aug 26 '06 #2
On 26 Aug 2006 05:04:04 -0700, "ha******@gmail .com" <ha******@gmail .com>
wrote:
><html>
<body>
<p style="width:30 %;">text1</p>
<p style="float:le ft;">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
higher position is preferred to one that is further to the right or
left. If text2 was positioned on the right of text1, I cannot see any
conflict with the rules for floated element.
Seems a silly question. Can somebody give me hints? Thanks.
This is one of the things that isn't very easy to get from the CSS spec.
However if you look at
http://www.w3.org/TR/REC-CSS2/visuren.html#flow-control
you'll see that elements only get adjusted next to a floating box if the
floating box resulted from an element *earlier* in the document. So to
get the effect you want, put the floated paragraph first.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Aug 26 '06 #3
ha******@gmail. com wrote:
<html>
<body>
<p style="width:30 %;">text1</p>
<p style="float:le ft;">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 *not* positioned on the right of text1?
Because this is a matter of top-to-bottom "flow" of element content.

1. The 1st P element by default is set flush left and this block element
per convention provides a double new line.

2. The next element, which happens to be the 2nd P element, also by
default is also set flush left at that point, below the 1st P element.
The "float:left " itself also causes the flush left action and in
this test case is not necessary, but superfluous. It would have been
useful for the next element if there were one, but in this example there
isn't one.
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
higher position is preferred to one that is further to the right or
left.
The above is talking about positioning the float within the "float box".
The float box encompasses the area from the top-left of the floated item
to the bottom-right of the subsequent element (which wan't in your
original sample) to the floated item.

Run this modified version to see what I mean and play with it to get a
full understanding. The "float box" is the green dotted area which also
includes the blue floated element.

<html>
<body>
<p style="width:30 %;border:1px solid red;">text1</p>
<p style="float:le ft;border:1px solid blue;margin-top:0;">text2</p>
<div style="border:1 px dotted green;">
This is where you should add lengthy text material to create several
lines in order to witness the (shrink)wrappin g of the text around the
floated element.
</div>
If text2 was positioned on the right of text1, I cannot see any
conflict with the rules for floated element.
Seems a silly question. Can somebody give me hints? Thanks.
Hopefully I have cleared up your understanding of floated elements and
you see it differently now.

The other respondents point out how to code to achieve what you had
wrongly expected. The "float box" does it.

Point of clarification re. the margin-top:0;
The 1st P element provides double line leading down to the "float box".
The 2nd P element has a margin-top default value from the top of the
"float box" and the margin-top:0 eliminates that.
The text within the DIV has no element wrapper, so has no default
margin-top value from the top of the "float box".

--
Gus
Aug 27 '06 #4

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

Similar topics

5
2490
by: lixiaoyao | last post by:
hi all I use matrix & vector function to allocate the space myself in c, typedef struct matrix_array newdata; struct matrix_array{ float **sy,*sxx; }; newdata ndata;//new data struct ndata.sy=matrix(1,nvar,1,nstep); ndata.sxx=vector(1,nstep);
3
1541
by: Ken H | last post by:
Hi I have a question about architecting solutions.. I have a part of a project which requires me to track person details (name, addresses, etc... Should I be creating Person objects, Address objects etc as Business layer classes and then have an data access layer which actually save / updates / delete to and from the DB.. If so, and bearing in mind the 'easiest' way to pass data between the layers would be with a dataset - should my BL...
6
2300
by: Martin Bootsma | last post by:
I have a C question, which looks very easy, but no one here seems to know an easy answer. I have a function "powell" (from Numerical Recipes) which takes an argument of the type "double (*f)(float)" But I want to be able to pass a
4
1749
by: JoeC | last post by:
I am trying to design some complex objects that have quite a bit of data. I understand most syntax but I am trying to learn how to make better design choices. The first question is to OK or good design to have large objects with several has-a relationship with other objects. Second, I want my unit to have a coord struct. struct coord{ int x;
9
3411
by: gdarian216 | last post by:
I have written a c++ program that takes input from a file and outputs the average. The program uses structs and I need to convert the struct to a class. I just dont know how to get started and if I will have to re-write my whole program. #include <cstdlib> #include <iostream> #include <string> #include <vector> #include <fstream> using namespace std;
12
4043
by: kostas | last post by:
Hi I was asked to propose an interview question for C/C++ programmers (CAD/CAE software) I came up with the following ---------------------------------------------------------------------------------------- float fun(float value) { float f1 =0., f2 = value; float tol = value/1000.; float result,tmp;
22
2784
by: Bill Reid | last post by:
I just noticed that my "improved" version of sscanf() doesn't assign floating point numbers properly if the variable assigned to is declared as a "float" rather than a "double". (This never cropped up before, since I rarely use "float"s for anything, and hardly ever use the function for floating-point numbers in the first place; I just was messing around testing it for all cases and noticed a problem.) Anyway, it is declared and I...
0
1012
by: Timothy Grant | last post by:
That's because s IS a string. It's not been converted to a float. In : s = '3.1415' In : n = float(s) In : type(s) Out: <type 'str'> In : type(n) Out: <type 'float'> Why are you avoiding the very simple try:/except: solution to this problem?
2
465
by: Bruce !C!+ | last post by:
as we known , we can use function pointer as: float Minus (float a, float b) { return a-b; } float (*getOp())(float, float) { return &Minus; } int main() { float (*opFun)(float, float) = NULL; opFun= getOp();
0
9887
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
9730
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
10983
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
10648
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...
1
10707
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10341
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...
1
7883
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
7056
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5719
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...

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.