the making of a webdev - 3
This series doesn’t go in any particular order, there is a bunch of things that I learn and realize as I code during the project. I present them in a chaotic order, not like how a book will present them. This means, you can find an introductory article somewhere after an advanced thing is spoken about. There is nothing wrong about this, I felt, because at work, I learn quite advanced things first and then come back to the fundamentals. Alright, this post is going to be on “CSS floats”
“Floating” content on a webpage is a nice and intuitive idea, whoever thought of that first. It is just like how a lotus flower would float on top of water — except that it won’t necessarily float to the right or the left. Any piece of text, graphic can float to the right or left, not on the centre.
.float-left-class {
float: left;
}
/* similarly float: right; */
When I first knew about floats, I imagined that a float has a float: centre; property, thats why I’m seeing a piece of content floating in a div in the centre of the page. Floating means real floating on top of the page — like this element is on the top, other elements lie beneath. I, later, came to know that an element can be made to float in the center using the left and right properties of a float. I, later, also came to know that there is something called z-index associated with an element to decide on the depth of placing an element and that floating an element doesn’t necessarily mean that element will be on the top of every other element, no matter what.
The thing, probably, I didn’t figure out quickly was that a “width” should be specified for a “float” element, explicitly. Except for the <img/> element, for which the width is implicitly known. This seems to be in the specification of CSS that an explicit width must be specified for elements that are floating. If there is no “width” specified for floating elements, then the floated elements’ width is the width of the content inside it. But that is the case usually, the result can be unpredictable because the specification doesn’t say what to do for undefined width of float elements.
The next thing is that I used redundant property specifications like this:
/* redundant css mistake */
.box-inside-container {
float: left;
display: block;
}
unaware of the fact that if an element is “floated”, it is converted into a block level element. That seems obvious, because only a block of text/graphic can be floated and there is no much value in saying a “float” while something is in its normal flow.
I must be a naive webdev to use floats without knowing what effects they produce on a webpage. I was caught up — not with the text clinging to the right of the left-floated element (thats how it should be), but with that, everything that comes after this floated element starts to cling on a single row until space is available and then on the next line, if space is not available. damnnn!! The immediate text appearing to the right of the left-floated element is fine, but not the text/graphic that comes after it, Why not? spec is right and well thought out.
Ok, so I got introduced to clear:both; , which can clear any left or right floats that I defined and push the next block level element onto the next line. Ofcourse, clear takes left and right as correct property values to clear left floats and right floats respectively.
The above knowledge of float seemed to be sufficient for a while, until I came across the next:
There is a float:right; element with a certain width defined inside a container box. Some text is appearing on the left of this right-floated element. Alright fine, everything is in the container box, with my desired effect that the right-floated box should appear as much right as possible. Now, there came more text into the floated element, the bloated element started to overflow, meaning it increased in height and what happened was that the floated element’s increased height hung outside of the parent container box. The container box didn’t expand to the height of the floated box. Weird!
Is this a bug in the browser? Or is there some valid reason why browsers exhibit this behaviour? Not sure, till date, haven’t given a thought.
This really got me nuts and made me read volumes of material in the net on the fix that needs to be applied for this scenario. Not only that, different browsers had to be treated differently to produce the desired result. Oh wait! what the heck, aren’t browsers supposed to follow standards. My colleague said in loud words “thats the thing”, “welcome to the webdev world”, “enjoy the fun”.
Having to write browser specific code and knowing what hacks to apply to what scenario didn’t look all that fun to me. It rather looked like a dark, gloomy, you-know-the-trick-you-survive kind of a world.
After much history and research, I found this piece of code fixing the problem of the container box expansion:
.clearfix:after {
display:block;
clear:both;
height: 0;
visibility: hidden;
content:'.';
}
“:after” is the pseudo class that creates an element which clears the floats at the same time doesn’t show any content. This seemed to be a much better fix which came after CSS2 spec, better because no markup litter is generated just to do this clearing float.
Ah, wait. I said browser hassles in this clearing and the above works good in browsers that respect the standards from time to time. The only other popular and notorious amoung web developers, the hacky IE has something internally as the “layout” data structure that relates to the dimensions of the boxes and the layout needs to be triggered to invoke its self clearing divs. The “layout” is triggered with any height, width, overflow or such dimensional properties but there is something called the “zoom” and this is promised by the IE team that atleast from IE5.5+, using this will trigger the layout.
.clearfix {
zoom: 1;
}
So, use this clearfix class on the container div’s and you are done, the container boxes will expand to contain the float elements.
One more subtler thing. Float elements’ border, margin, padding don’t collapse with parent/container borders, margin or padding. They stand distinct. This means, whatever margin is specified for the float element, that will begin inside of the container element.
This much floating seems sufficient for me, so far. 
Let me know if youve trouble in comprehending some things I’m speaking above or want to leave feedback/opinions. You could use thanix[at]gmail[dot]com for the same.
Update:
To better explain the various “float” scenarios, I’ve coded a sample page here[1]
[1] http://thanix.info/webdev/basics/float-1.html
Written by thanix on December 5th, 2007 with
no comments.
Read more articles on basic and webdev.
- [+] Digg: Feature this article
- [+] Del.icio.us: Bookmark this article
- [+] Furl: Bookmark this article