473,231 Members | 1,439 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,231 software developers and data experts.

Mixing floats, positioning and offsets

I've been experimenting with floats, positioning and offsets (top, left, etc.) to see what happens when you mix the properties together.
All this may be old news to most of you, but it was extremely helpful to me. The results are summarized in this chart. In all these tests I was using a single child element inside a containing block. (I hope the formatting doesn't fall apart too badly when it's uploaded to a newsgroup.)
| Do Floats | Do Offsets |
Position | Matter? | Matter? |
---------|-----------|------------|
Static | Yes | No |
---------|-----------|------------|
Relative | Yes | Yes |
---------|-----------|------------|
Absolute | No* | Yes |
---------|-----------|------------|

OK. That all makes sense. For example, if your positioning is static there's no point in specifying offsets, because then you'd be defining relatively positioning. In the case of relative positioning with both a float and offsets, it appears that the element is floated first and then offset. Yeah, I know, you probably knew that.

Wrapping my head around an absolutely positioned, floated element was a bit trickier, and apparently IE had a little trouble with it also*. Check out what happens in IE vs. FireFox when you have an element that has position: absolute; float: right and no offsets defined:

http://www.thehammondhouse.com/test_...ight%20Off.htm

All of this brings up a this question. Is it fair to say that it would be unusual to find an element that is both floated and offset? Actually a better way to ask the question might be is it unusual to have a good *reason* to have an element that is both floated and offset?
Sep 9 '06 #1
9 3346
Bill Norton wrote:
I've been experimenting with floats, positioning and offsets (top, left,
etc.) to see what happens when you mix the properties together.

All of this brings up a this question. Is it fair to say that it would
be unusual to find an element that is both floated and offset? Actually
a better way to ask the question might be is it unusual to have a good
*reason* to have an element that is both floated and offset?
You're trying to take a shortcut in experimenting with behaviors rather
than reading, understanding and following the specifications. This is
what got the Web in trouble in the first place. Here are a few pointers:

A floated item slams the item to the extreme left or right, as the case
may be, within its container. It sets the item flush left or flush
right. If you wish to offset it, you have to affect the item some other
way, since the specs state:

"This property [float] specifies whether a box should float to the left,
right, or not at all. It may be set for any element, but only applies to
elements that generate boxes that are not absolutely positioned."

So, no sense in any further discussion on this - you cannot float an abs
element, period.

Regarding your, 'Do Offsets Matter for Static?' you should also be aware
that Static does not take any offsetting properties whether block or inline.

--
Gus
Sep 10 '06 #2
"Gus Richter" wrote
You're trying to take a shortcut in experimenting with behaviors rather
than reading, understanding and following the specifications.
Please. I've done plenty of reading on this. The few hours I've spent
experimenting with these properties has given me a far better understanding
than yet more reading would ever do. Trust me. I know my learning style.
So, no sense in any further discussion on this - you cannot float an abs
element, period.
Well, tell it to MS, then. What's happening with their absolute,
right-floated, non-offset element isn't exactly floating, but it's not
exactly according to specs either.

Gus, you obviously place a lot more weight on specs than I do. Ultimately I
have to write to the browsers, not to the specs, and the main browser I have
to write to is IE. That's the unfortunate reality for me.
Regarding your, 'Do Offsets Matter for Static?' you should also be aware
that Static does not take any offsetting properties whether block or
inline.
Well, there's nothing that keeps you from specifying offsets for a static,
it's just that they will be ignored. This isn't like passing parameters to a
function where an invalid or meaningless parameter could make it crash.

But it's true that statics don't "take" offsets because then, well, they'd
be relatives, wouldn't they?

Sep 10 '06 #3
Bill Norton wrote:
>
>So, no sense in any further discussion on this - you cannot float an abs
element, period.

Well, tell it to MS, then. What's happening with their absolute,
right-floated, non-offset element isn't exactly floating, but it's not
exactly according to specs either.
If the specs tell you that you cannot do a certain thing, then you
should not do that thing, IMHO. If you do that thing, the result may be
unpredictable, especially in a faulty browser such as IE. If you do that
thing anyway, then the browser should ignore it. Fx does so in this case
and IE does not, but proceeds to do something unpredictable (unspecified
in the specs). You give some value to IE's action here?
Gus, you obviously place a lot more weight on specs than I do. Ultimately I
have to write to the browsers, not to the specs, and the main browser I have
to write to is IE. That's the unfortunate reality for me.
Due to the fact that some browsers had some difficulty in following some
of the specs, the web had some problems when author's wrote to the
quirks (behaviors) of some browsers. This is not the way it should be
done today. Authoring should be according to the specs with compensation
to accomodate any defective browser such as IE6. Generally it can be
done within the spec guidelines. This also means that one should check
with Fx/Opera _first_ and IE _last_. If IE is the odd-man out, IE will
be wrong 99% of the time.
>Regarding your, 'Do Offsets Matter for Static?' you should also be aware
that Static does not take any offsetting properties whether block or
inline.

Well, there's nothing that keeps you from specifying offsets for a static,
it's just that they will be ignored. This isn't like passing parameters to a
function where an invalid or meaningless parameter could make it crash.
Very much related to my first paragraph:
If the specs tell you that you cannot do a certain thing, then you
should not do that thing, IMHO. If you do that thing anyway, the result
may be unpredictable, especially in a faulty browser such as IE. In this
case it seems that Fx and IE both ignore (don't take) the offsets for
Static. So why would you then include it?
But it's true that statics don't "take" offsets because then, well, they'd
be relatives, wouldn't they?
Right. Which should tell you to not include offsets for Static.

--
Gus
Sep 10 '06 #4

"Gus Richter" wrote
Authoring should be according to the specs with compensation to accomodate
any defective browser such as IE6.
Good point.

But back to the question:

Is it fair to say that it would be unusual to find an element that is both
floated and offset?

Sep 11 '06 #5
Bill Norton wrote:
>
Is it fair to say that it would be unusual to find an element that is both
floated and offset?
It's all in:
<http://www.w3.org/TR/CSS21/visuren.html>
with specific references to:

<http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme>
explains the three positioning schemes.

<http://www.w3.org/TR/CSS21/visuren.html#choose-position>
explains that there are two positioning properties - position and float.

<http://www.w3.org/TR/CSS21/visuren.html#position-props>
explains that the offsets may be applied only to an element that has a
position property other than static - floats are excluded.

<http://www.w3.org/TR/CSS21/visuren.html#float-position>
explains the float algorithm - neither a position property, nor the
offsets are applicable to a float.

Bottom line: Not only would I say that it would be unusual to find an
element that is both floated and offset, but that it is an error, not
conforming to the specs, a result of bad coding due to a lack of
understanding and just plain garbage.

--
Gus
Sep 11 '06 #6
Gus Richter <gu********@netscape.netwrote:
>Is it fair to say that it would be unusual to find an element that is both
floated and offset?

It's all in:
<http://www.w3.org/TR/CSS21/visuren.html>
with specific references to:

<http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme>
explains the three positioning schemes.

<http://www.w3.org/TR/CSS21/visuren.html#choose-position>
explains that there are two positioning properties - position and float.

<http://www.w3.org/TR/CSS21/visuren.html#position-props>
explains that the offsets may be applied only to an element that has a
position property other than static - floats are excluded.

<http://www.w3.org/TR/CSS21/visuren.html#float-position>
explains the float algorithm - neither a position property, nor the
offsets are applicable to a float.

Bottom line: Not only would I say that it would be unusual to find an
element that is both floated and offset, but that it is an error, not
conforming to the specs, a result of bad coding due to a lack of
understanding and just plain garbage.
An element can be both floated and have position:relative, in which case
the box offsets apply.

--
Spartanicus
Sep 11 '06 #7
Spartanicus wrote:
>
An element can be both floated and have position:relative, in which case
the box offsets apply.
I tried this and it does indeed work.
That being said, my belief is that this behavior is undefined and
according to my understanding of the specs, should not work. Can you
give a reference supporting this behavior?

How about this:
A rel element is offset from its position in the normal flow.
A float is out of the normal flow.
My test shows that the offset is not from where the rel element had been
in the normal flow, but offset from its float position.
This goes against the grain.

My previous links proved by omission that this should not work.
Where in the specifications does it even hint that this is correct behavior?

BTW, this is the test I used:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Float and Relative Offset test</title>
<style type="text/css">
#box1 {
background-color: #ff0000;
height: 100px;
width: 200px;
float: left;
}
#box2 {
background-color: #00ff00;
height: 200px;
width: 200px;
clear: left;
float: left;
}
#box3 {
background-color: #0000ff;
float: left;position:relative;top:100px;left:100px;
height: 50px;
width: 300px;
}
</style>
</head>
<body>
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
<p style="clear:left;">Firefox and Opera support this float and relative
offset. IE also (with another problem evident).</p>
</body>
</html>

--
Gus
Sep 11 '06 #8
Gus Richter <gu********@netscape.netwrote:
>An element can be both floated and have position:relative, in which case
the box offsets apply.

I tried this and it does indeed work.
That being said, my belief is that this behavior is undefined and
according to my understanding of the specs, should not work. Can you
give a reference supporting this behavior?
http://www.w3.org/TR/CSS21/visuren.h...ve-positioning

--
Spartanicus
Sep 11 '06 #9
Spartanicus wrote:
Gus Richter <gu********@netscape.netwrote:
>>An element can be both floated and have position:relative, in which case
the box offsets apply.
I tried this and it does indeed work.
That being said, my belief is that this behavior is undefined and
according to my understanding of the specs, should not work. Can you
give a reference supporting this behavior?

http://www.w3.org/TR/CSS21/visuren.h...ve-positioning
Right, thank you. I kept on missing the 'or floated'.

"Once a box has been laid out according to the normal flow _or floated_,
it may be shifted relative to this position."

So, Bill and anyone else following this: My appologies - A floated
element may indeed be offset relatively.

--
Gus
Sep 11 '06 #10

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

Similar topics

2
by: Stephen Weatherly | last post by:
Could anyone please help me with a problem I am having with my table widths??? If I have 2 images within a td tag, but using CSS relative positioning I position one over the top of the second (I...
4
by: Jane Withnolastname | last post by:
I am trying to re-work an old site by replacing the html with css. On the main page, I have a logo image which I needed centred on the initial screen. I found the solution here:...
2
by: Dariusz | last post by:
I am trying out a fully CSS-P layout (first time with floats) and am having problems with getting certain DIV's from displaying properly - or rather - they are being completely ignored. Below is...
14
by: Harlan Messinger | last post by:
What am I not understanding about the definition of { position: absolute; }? "The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These...
6
by: sbalko | last post by:
Hi, I am trying to read Java-floats (IEEE 754 encoding) stored in a binary file from C (gcc on linux/i386, more specifically). Unfortunately, C seems to expect floats to be stored somewhat...
2
by: listerofsmeg01 | last post by:
I have the following code to align some form controls: <style type="text/css"> ..label {float:left; width:50%} ..input {width:40%} </style> <div> <div class="label">Enter your username:</div>...
2
by: TheCruelPanda | last post by:
Hey there. My name is Rowan, and it's been three weeks since I last used tables for an HTML design. Okay, I'm rather new to CSS and I have a big positioning problem here. It might not be a...
3
by: M.-A. Lemburg | last post by:
On 2008-08-07 20:41, Laszlo Nagy wrote: 1 It also very fast at dumping/loading lists, tuples, dictionaries, floats, etc. -- Marc-Andre Lemburg eGenix.com
6
by: Hendrik Maryns | last post by:
Hi, There is a little problem with the header on the page I recently converted from frames to proper HTML+CSS. The top part with the navigation used to be the top frame but is now included via...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...

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.