Why float?

[Wolfgang Meier]

Hi,

Although it might seem like I am firing out random posts in quick
succession this matter is indeed one I thought about for quite some
time without coming to a conclusion:

Why is it that most professional CSS authors prefer /float/ing elements
over elements held in place by /position/?

Given, for example, the following layout...

+-----------------+
| 1 |
+---+-------------+
| | |
| 2 | 3 |
| | |
+---+-------------+

....with (1) having some known (say 5em) height and (2) having some
known width (say 5em) I don't see why I should apply float to (2) and
(3) instead of just positioning (3) to {+5em, +5em}.

While trying to find the issue behind this, the more I read about
/float/, the more workarounds, tricks and quirks necessary for broken
CSS implementations I found -- so just why is /float/ better than
/position/?
Please enlighten me :-)

Wolf

[Spartanicus]

"Wolfgang Meier" <wo***@sofort-mail.de> wrote:

why is /float/ better than /position/?

Who says that it is, or that apples and pears can even be ranked in such
a better/worse classification?

Either usage for the purpose of creating a "CSS" layout is a second rate
choice, the least unsuitable method to create a "CSS" layout is a CSS
table. "Least unsuitable" since a CSS tables when used with CSS 2.x are
in themselves a poor tool to create a layouts suitable for the web, but
CSS 2.x offers no mechanism to create good quality web layouts.

People commonly use floats or positioning to create a "CSS" layout
because IE doesn't support CSS tables. Floating and positioning are
fundamentally unsuitable for creating a quality web layout, but they are
the only two CSS methods available if the code needs to work in IE. Both
methods create fundamental problems (bugs not included), these problems
should be extensively examined and weighed against the potential
advantage offering a semantically correct layout.

I say potential because the actual advantage of using an IE compatible
"CSS" layout instead of a HTML table is imagined in most cases, the
result of wishful thinking, and typically null in reality.

Using a "CSS" layout has become a badge of honour, bearers are exempt
from scorn being poured over them in newsgroups. Few of the
"enlightened" souls with their CSS layouts are aware of the negative
effects of using such fundamentally unsuitable methods such as floating
and positioning for creating a layout.

--
Spartanicus

[Wolfgang Meier]

Spartanicus wrote:

Few of the "enlightened" souls with their CSS layouts
are aware of the negative effects of using such fundamentally
unsuitable methods such as floating and positioning for creating a layout.

Interesting theory, please go into detail!

Anyway, the problem remains. I'm not looking for the best theoretically
possible solution but the "best" practical solution. To me, it seemed
like most authors regard /float/ing elements as the best practical
solution and I just wondered why.

[Spartanicus]

"Wolfgang Meier" <wo***@sofort-mail.de> wrote:

Few of the "enlightened" souls with their CSS layouts
are aware of the negative effects of using such fundamentally
unsuitable methods such as floating and positioning for creating a layout.
Interesting theory, please go into detail!

Both floated and positioned layout boxes fail to contain their content,
if that content doesn't fit in the layout box the content will either
overflow, be clipped, or cause scroll bars inside the viewport, none are
acceptable behaviour for a basic quality layout mechanism.

Clearing a float within a layout box positioned horizontally adjacent to
a floated layout box results in the non floated layout box to be moved
below the floated layout box. This can be hacked around, but floating as
a layout method has already failed another basic requirement: layout
boxes (and their content) should be isolated from content in other
layout boxes.

The content of an absolutely positioned box cannot be allowed to wrap if
there is another positioned box placed directly below it as it will
overlap the content of that box. Not allowing content to wrap causes
horizontal scroll bars, an unnecessary irk to impose on the user.

When abused to create a "layout", floating imposes restrictions on where
to place content on screen, and/or causes content order problems.

Both floating and positioning are incapable of creating a basic layout
format: columns that expand vertically interdependently depending on
their content.

The CSS float property was intended to replace the HTML align attribute.
It's intended and only proper usage is to move an element like an image
to one side and have text flow next and beneath it. All other uses are
fundamentally inappropriate hacks that cause the aforementioned
problems.
Anyway, the problem remains. I'm not looking for the best theoretically
possible solution but the "best" practical solution.

Then use a HTML table, unless you are highly skilled with CSS, perfectly
understand the implications of a floated and/or positioned CSS layout,
and you can come up with a valid reason as to why using a HTML table
would be bad for your users (most unlikely), to such an extent that it
outweighs the disadvantages of positioned or floated CSS layouts.

The one exception to the above would be if the site's primary purpose is
for you to experiment with CSS to further your skills and/or
understanding of the technology.

--
Spartanicus

[Alan J. Flavell]

On Tue, 28 Jun 2005, Spartanicus wrote:

Clearing a float within a layout box positioned horizontally
adjacent to a floated layout box results in the non floated layout
box to be moved below the floated layout box.
That's a benefit of using floating, indeed. When the proposed layout
is inappropriate to the available viewport, it adapts itself more
gracefully to what's available.
Both floating and positioning are incapable of creating a basic
layout format:

I can't think of /any/ technique for "creating a basic layout format"
on a browser whose characteristics you as author aren't aware of (and
should not be taking any specific interest in at the time of serving
out the page). Forcing it too hard runs the risk of causing
left/right scrolling (something which readers report to be very
annoying, and I agree with them) or alternatively getting lines of
text with only a couple of words on them, cramped by adjacent columns
of clutter that are of no benefit in a restricted viewport width - or
when the reader needs an unusually large font.

As author, your job is to make presentation proposals, which may or
may not be useful to the recipient. I'll take it for granted that
you've designed it to do what you want in some mainstream browsing
situation: then, to my way of thinking, the interesting thing is what
it's going to do when the situation is far enough from that to make a
significant difference.

I recognise that some of the other technical points you made about CSS
implementation are correct, but on this rather important general point
I do think I have to disagree with you. One of the DISadvantages of
the table approach is that it "works" (in the sense of doing what the
author requested, instead of what would be more appropriate to the
presentation situation) even in situations where it's become
senseless.

[Spartanicus]

"Alan J. Flavell" <fl*****@ph.gla.ac.uk> wrote:

Clearing a float within a layout box positioned horizontally
adjacent to a floated layout box results in the non floated layout
box to be moved below the floated layout box.

That's a benefit of using floating, indeed. When the proposed layout
is inappropriate to the available viewport, it adapts itself more
gracefully to what's available.

The issue I described is an entirely one than boxes shifting below other
boxes as a result of unsufficient client viewport width.

Both floating and positioning are incapable of creating a basic
layout format:

I can't think of /any/ technique for "creating a basic layout format"
on a browser whose characteristics you as author aren't aware of (and
should not be taking any specific interest in at the time of serving
out the page). Forcing it too hard runs the risk of causing
left/right scrolling (something which readers report to be very
annoying, and I agree with them) or alternatively getting lines of
text with only a couple of words on them, cramped by adjacent columns
of clutter that are of no benefit in a restricted viewport width - or
when the reader needs an unusually large font.

As author, your job is to make presentation proposals, which may or
may not be useful to the recipient. I'll take it for granted that
you've designed it to do what you want in some mainstream browsing
situation: then, to my way of thinking, the interesting thing is what
it's going to do when the situation is far enough from that to make a
significant difference.

I recognise that some of the other technical points you made about CSS
implementation are correct, but on this rather important general point
I do think I have to disagree with you. One of the DISadvantages of
the table approach is that it "works" (in the sense of doing what the
author requested, instead of what would be more appropriate to the
presentation situation) even in situations where it's become
senseless.

I was specifically asked about the disadvantages of floated and or
positioned "CSS" layouts.

The suitability of grid based layouts is a different topic. I consider
the ability to work on an infinite number of viewport widths as an
essential requirement for web layouts. But a grid layout such as
established by a table need not be fixed, it can be redefined to form a
different configuration depending on the client's viewport width. Such a
mechanism is however not provided by CSS2.x, which is why I wrote: "CSS
2.x offers no mechanism to create good quality web layouts." The CSS3
proposals include such a mechanism (media queries) and has a rudimentary
implementation in Opera 7.2+. Used in conjunction with CSS tables (or
even HTML tables), an author could solve that particular problem.

Under CSS 2.x all we have is the handheld media type, which is woefully
inadequate since it fails to accommodate the wide range of viewport
widths and screen resolutions that are used.

That leaves unresolved the issue of separating content order and
placement on screen. I'm not aware of an intent by w3c to address this
elementary layout issue, or even of an awareness that it needs to be
addressed.

--
Spartanicus

[Stan McCann]

"Wolfgang Meier" <wo***@sofort-mail.de> wrote in
news:11*********************@g14g2000cwa.googlegro ups.com:

Hi,

Although it might seem like I am firing out random posts in quick
succession this matter is indeed one I thought about for quite some
time without coming to a conclusion:

Why is it that most professional CSS authors prefer /float/ing
elements
It works in most browsers.
over elements held in place by /position/?
It doesn't work in the most popular browser.

Given, for example, the following layout...

+-----------------+
| 1 |
+---+-------------+
| | |
| 2 | 3 |
| | |
+---+-------------+

...with (1) having some known (say 5em) height and (2) having some
known width (say 5em) I don't see why I should apply float to (2)
and (3) instead of just positioning (3) to {+5em, +5em}.

While trying to find the issue behind this, the more I read about
/float/, the more workarounds, tricks and quirks necessary for
broken CSS implementations I found -- so just why is /float/ better
than /position/?
Speaking of broken implementations, try speaking to this guy I heard
about named Bill Gates. Maybe he could fix his browser?


Please enlighten me :-)

Have you ever looked at a page using position in IE? It isn't
(positioned that is).

--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
http://alamo.nmsu.edu/ There are 10 kinds of people.
Those that understand binary and those that don't.

[Spartanicus]

Stan McCann <[e-mail]> wrote:

over elements held in place by /position/?

It doesn't work in the most popular browser.

It's buggy, but usable, there are solutions to some of the IE
positioning bugs.

--
Spartanicus

[Stan McCann]

Spartanicus <in*****@invalid.invalid> wrote in
news:sj********************************@news.spart anicus.utvinternet.ie
:

Stan McCann <[e-mail]> wrote:

over elements held in place by /position/?

It doesn't work in the most popular browser.

It's buggy, but usable, there are solutions to some of the IE
positioning bugs.

Hmm. I quit trying after a while of unsuccessfully trying to position
elements to work with IE. It's lack of support for CSS 2.1 is so bad
that I mostly stick with CSS 1.

--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
http://alamo.nmsu.edu/ There are 10 kinds of people.
Those that understand binary and those that don't.

[Spartanicus]

Stan McCann <[e-mail]> wrote:

over elements held in place by /position/?

It doesn't work in the most popular browser.

It's buggy, but usable, there are solutions to some of the IE
positioning bugs.

Hmm. I quit trying after a while of unsuccessfully trying to position
elements to work with IE.

Successful use of CSS positioning requires considerable skills. Both CSS
and browsers have their failings, but I suggest that you leave judgement
and criticism of either to people who are sufficiently skilled with the
technology.

Otherwise you end up looking silly by making incorrect claims like the
above.

--
Spartanicus

[Jan Roland Eriksson]

On Tue, 28 Jun 2005 19:17:01 GMT, Spartanicus <in*****@invalid.invalid>
wrote:

Stan McCann <[e-mail]> wrote:

Hmm. I quit trying after a while of unsuccessfully trying to
position elements to work with IE.

Absolute positioning is not fit for web use in the first place.
My conclusion is that abs.pos. stuff is best saved for known output
media's like e.g. print on paper and/or projector presentations
Successful use of CSS positioning requires considerable skills.
Not really, if the presentation tool and media is known in advance;
ahhh...you mean on the www? yes of course. There's no need to use
positioning at all in www presentations.
Both CSS and browsers have their failings

So had old time typesetting, a standard grinding device was the ultimate
tool to use for printing perfect placement of certain lead casted
characters.

Still, I do accept CSS for what it has become today, in implements that
is. CSS2.1 is in "last call" at the moment (funny to see that the
/required/ test suit materialized that fast :-).

Could we just get 100% compliant implements of CSS2.1 we would have a
stable ground to stand on for future developments.

--
Rex

[Stan McCann]

Spartanicus <in*****@invalid.invalid> wrote in
news:t2********************************@news.spart anicus.utvinternet.ie
:

Stan McCann <[e-mail]> wrote:

> over elements held in place by /position/?

It doesn't work in the most popular browser.

It's buggy, but usable, there are solutions to some of the IE
My opinion: buggy = doesn't work.
positioning bugs.
Hmm. I quit trying after a while of unsuccessfully trying to
position elements to work with IE.

Successful use of CSS positioning requires considerable skills. Both

I have considerable skill. Do I have more to learn? Yes, as I'm sure
we all do.
CSS and browsers have their failings, but I suggest that you leave
judgement and criticism of either to people who are sufficiently
skilled with the technology.
The only one I see being critical and/or judgemental about anything is
you.

Otherwise you end up looking silly by making incorrect claims like
the above.

I did not make an incorrect claim and I don't think I look silly about
saying something that IMO is true. Positioning does not "work" in IE.
If you have to "make it work" by finding some workaround, then it DOES
NOT WORK.

Agree or disagree, I don't care. And if you don't like what I say,
then just kf me. OTOH, if you show me something proving I'm incorrect,
I am always willing to learn and I have no problem admitting to
mistakes. Maybe that makes me look silly?

--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
http://alamo.nmsu.edu/ There are 10 kinds of people.
Those that understand binary and those that don't.

[Spartanicus]

Stan McCann <[e-mail]> wrote:

Hmm. I quit trying after a while of unsuccessfully trying to
position elements to work with IE.

Successful use of CSS positioning requires considerable skills.

I have considerable skill.

Regarding the subject of this group your posts tell a different story.

CSS and browsers have their failings, but I suggest that you leave
judgement and criticism of either to people who are sufficiently
skilled with the technology.

The only one I see being critical and/or judgemental about anything is
you.

Otherwise you end up looking silly by making incorrect claims like
the above.

I did not make an incorrect claim and I don't think I look silly about
saying something that IMO is true. Positioning does not "work" in IE.

Post a url with a minimized example so that we can see what you are on
about.

--
Spartanicus

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Stan McCann wrote:

Spartanicus <in*****@invalid.invalid> wrote in
news:t2********************************@news.spart anicus.utvinternet.ie
:

Stan McCann <[e-mail]> wrote:

>> over elements held in place by /position/?
>
>It doesn't work in the most popular browser.

It's buggy, but usable, there are solutions to some of the IE
My opinion: buggy = doesn't work.
With that logic:

Tables are buggy in IE. Tables don't work in IE.

HTTP is buggy in IE. WWW don't work with IE.

positioning bugs.

Hmm. I quit trying after a while of unsuccessfully trying to
position elements to work with IE.

Successful use of CSS positioning requires considerable skills. Both

I have considerable skill.

When someone says you need considerable skills, he propably pretty much
means skill at least comparable his own. Spartanicus is way ahead you...

CSS and browsers have their failings, but I suggest that you leave
judgement and criticism of either to people who are sufficiently
skilled with the technology.

The only one I see being critical and/or judgemental about anything is
you.

Spartanicus has considerable skills. You state something about equal to
"WWW does not work" and think it is not judgemental/critical...

And I am bit sceptic as well. IMHO, floats and positioning are very good
layout tools. But they are totally unsuitable for stuff which tables are
good, and they don't solve many problems in design that I have all the
time.

And the fact that they are supported so poorly means that you shouldn't
use them too much for complex cases if you don't know. Just like you
ignore lots of the fun stuff in html table.

The difference is that support for tables in ingremental, IE supports
rest at least as much as it. In case of CSS, IE supports again least, but
it is not guaranteed that every other browser supports same stuff, or
same way.
I did not make an incorrect claim and I don't think I look silly about
saying something that IMO is true. Positioning does not "work" in IE.
If you have to "make it work" by finding some workaround, then it DOES
NOT WORK.

Positioning works to some extend in IE. You don't always need tricks. But
if you try to do something more complicated, then you need the tricks.
There is things that just can't be done using tables, and using
positioning or floats is better option than forcing table layout. (trough
you can make float layout using tables and get it work on NN2,
practically no-one does.)

Usually, reson why beginner fails on positioning has absolutely nothing
to do with support for positioning to IE, but failure to understand how
it works.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Kohtuuhintainen yksiö/huone haussa Oulusta syyskuusta eteenpäin.
Searching places to sleep on axis Bonn - Tsech - Poland - baltic sea in
july

[Steve Pugh]

Stan McCann wrote:

Have you ever looked at a page using position in IE? It isn't
(positioned that is).

I can only assume that you're talking about position: fixed; as IE
supports position: absolute; and position: relative; relatively (sorry)
well.

http://www.stevepugh.net/VTT/ uses both relative and absolute
positioning (and floats) and the shortcomings in IE compared to other
browsers are down to IE's failure to support max-width and some float
bugs rather than any failure to support positioning (oh, and some
wierdness wrt .ico files).

Steve

[Stan McCann]

Lauri Raittila <la***@raittila.cjb.net> wrote in
news:MP***********************@news.individual.net :

in comp.infosystems.www.authoring.stylesheets, Stan McCann wrote:

Spartanicus <in*****@invalid.invalid> wrote in
news:t2********************************@news.spart anicus.utvinternet
.ie
:

> Stan McCann <[e-mail]> wrote:
>
>>>>> over elements held in place by /position/?
>>>>
>>>>It doesn't work in the most popular browser.
>>>
>>> It's buggy, but usable, there are solutions to some of the IE
My opinion: buggy = doesn't work.

With that logic:

Tables are buggy in IE. Tables don't work in IE.

HTTP is buggy in IE. WWW don't work with IE.

You're being rediculous and you know it. Just add me to your kf like
you do so often at the drop of a hat and be done with it. By YOUR
logic, nothing works.

>>> positioning bugs.
>>
>>Hmm. I quit trying after a while of unsuccessfully trying to
>>position elements to work with IE.
>
> Successful use of CSS positioning requires considerable skills.
> Both
I have considerable skill.

When someone says you need considerable skills, he propably pretty
much means skill at least comparable his own. Spartanicus is way
ahead you...

That may well be and probably is. I've been reading his posts since I
first started reading in this group. BUT, I've also seen many of his
posts just like the one he made in reply to me where he comes off as a
pompous ass.

> CSS and browsers have their failings, but I suggest that you
> leave judgement and criticism of either to people who are
> sufficiently skilled with the technology.

This is the part of his post I have a problem with. Because I'm not at
his level, I should not post? Because I don't agree with him, I'm not
to post? HE is being judgemental and critical. I simply said, and I
stand by it, that position does not work. He is pompously quibbling
with my definition of "work" more than anything.

The only one I see being critical and/or judgemental about anything
is you.
Spartanicus has considerable skills. You state something about equal
to "WWW does not work" and think it is not judgemental/critical...

Where did I say such a thing? I said that float works across browsers,
position doesn't. He said position works but is buggy, there are
solutions. If there are solutions (work arounds), then it doesn't
work. I don't see a problem with that statement.

And I am bit sceptic as well. IMHO, floats and positioning are very
good layout tools. But they are totally unsuitable for stuff which
tables are good, and they don't solve many problems in design that I
have all the time.
I use float a lot. It works as expected in most browsers. Here's a
quick little example page to show what I am talking about:
http://stanmccann.us/test/index.html. In FireFox, float works as
expected, so does position. In IE, float works as expected, position
DOES NOT! No workarounds, just simple HTML and CSS. I was even
thinking about this page when I made the post stating that position
does not work. When Spartanicus said it did, I was hoping for an
example that I could use, not a "You're too stupid to post here." that
he replied with. I want a solution to the problem on this page because
the client wants to use frames to keep the menu on the side, I've been
looking for a better solution than frames. Position isn't it.

And the fact that they are supported so poorly means that you
shouldn't use them too much for complex cases if you don't know.
Just like you ignore lots of the fun stuff in html table.

The difference is that support for tables in ingremental, IE
supports rest at least as much as it. In case of CSS, IE supports
again least, but it is not guaranteed that every other browser
supports same stuff, or same way.

I did not make an incorrect claim and I don't think I look silly
about saying something that IMO is true. Positioning does not
"work" in IE. If you have to "make it work" by finding some
workaround, then it DOES NOT WORK.
Positioning works to some extend in IE. You don't always need
tricks. But if you try to do something more complicated, then you
need the tricks. There is things that just can't be done using

You need tricks because it doesn't work. "works to some extent" does
not mean "it works." Duh!
tables, and using positioning or floats is better option than
forcing table layout. (trough you can make float layout using tables
and get it work on NN2, practically no-one does.)

Usually, reson why beginner fails on positioning has absolutely
nothing to do with support for positioning to IE, but failure to
understand how it works.

I am not a beginner. Having read and posted from/to usenet since the
early 90s, I know enough to read a group for a while before posting.
I've been reading regularly and posting once in a while for a year or
better. I freely admit that I don't know it all and I don't post when
I don't know what I am talking about. When position:static makes
something stay on the page where you put it in IE, I might agree that
position works in IE.

I don't know why you (Lauri) or you (Spartanicus) read and post in this
newsgroup, but I read here to learn, and I post to share some of that
knowledge that I have learned.

Lauri, you seem to read and post here so that you can kf people for ONE
top post, instead of letting them know what the expectations are and
giving them a chance.

Spartanicus, you seem to read and post here to build your ego by
putting others down and being a pompous ass.

I won't kf either of you because I value much of what I read posted by
both of you. You both know HTML and CSS very well, that is obvious.
But, I have no tolerance for your intolerance. I will continue posting
when I think that I have something to offer. I simply don't care if
you read what I post or not. I simply don't care if you agree with me
or not. But, when you tell me that I shouldn't post here, I will
certainly call you on it.

--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
http://alamo.nmsu.edu/ There are 10 kinds of people.
Those that understand binary and those that don't.

[Els]

Stan McCann wrote:

CSS and browsers have their failings, but I suggest that you
leave judgement and criticism of either to people who are
sufficiently skilled with the technology.
This is the part of his post I have a problem with. Because I'm
not at his level, I should not post?

No, it's not that you shouldn't post, it's that you shouldn't say it
doesn't work in IE. Cause it does.
Spartanicus has considerable skills. You state something about
equal to "WWW does not work" and think it is not
judgemental/critical...

Where did I say such a thing? I said that float works across
browsers, position doesn't. He said position works but is buggy,
there are solutions. If there are solutions (work arounds), then
it doesn't work. I don't see a problem with that statement.

But it works. Work arounds are only needed when using them in very
complicated situations.

And I am bit sceptic as well. IMHO, floats and positioning are
very good layout tools. But they are totally unsuitable for stuff
which tables are good, and they don't solve many problems in
design that I have all the time.

I use float a lot. It works as expected in most browsers. Here's
a quick little example page to show what I am talking about:
http://stanmccann.us/test/index.html. In FireFox, float works as
expected, so does position. In IE, float works as expected,
position DOES NOT! No workarounds, just simple HTML and CSS.

By the example you now showed, I'm getting your drift now. But it's
completely understandable that no one did. What you mean is
"position:fixed".

Position:absolute, position:relative, are also "position". And they
work. The only position value that doesn't work in IE is "fixed".

[snip superfluous rant based on misunderstanding because of misuse of
term 'position'.]

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Kirsty MacColl - A New England