 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / June 2005Why float?
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 >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.  SignatureSpartanicus >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. >>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. SignatureSpartanicus > 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. >> Clearing a float within a layout box positioned horizontally >> adjacent to a floated layout box results in the non floated layout [quoted text clipped - 3 lines] >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: [quoted text clipped - 23 lines] >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. SignatureSpartanicus > Hi, > [quoted text clipped - 4 lines] > 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... > [quoted text clipped - 14 lines] > 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). SignatureStan 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. >> 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. SignatureSpartanicus >>> 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. SignatureStan 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. >>>> over elements held in place by /position/? >>> [quoted text clipped - 5 lines] >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. SignatureSpartanicus >>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. SignatureRex >>>>> 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? SignatureStan 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. >>>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 [quoted text clipped - 8 lines] >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. SignatureSpartanicus > >>>>> over elements held in place by /position/? > >>>> [quoted text clipped - 3 lines] > > 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. > >> [quoted text clipped - 4 lines] > > 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. SignatureLauri 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 >> Spartanicus <invalid@invalid.invalid> wrote in >> news:t273c1589h3a5k729otk99tceb4tiob0dg@news.spartanicus.utvinternet [quoted text clipped - 13 lines] > > 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. >> >> [quoted text clipped - 9 lines] > 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 a.s. >> > 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. [quoted text clipped - 13 lines] > 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 [quoted text clipped - 3 lines] > 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 a.s. 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. SignatureStan 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. >>>> 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 [quoted text clipped - 4 lines] > 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 [quoted text clipped - 6 lines] > 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'.] SignatureEls http://locusmeus.com/ Sonhos vem. Sonhos vão. O resto é imperfeito. - Renato Russo - Now playing: Kirsty MacColl - A New England > 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 |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.