The topic of the day is “positioning”, the first thing after floating is the positioning of elements I was forced to learn. There is a lot of emphasis on the richness of the web content presented to the user, these days. Small images, texts, round corners, uncluttered and simple design, everything calls for this thing known as “CSS positioning”.
position:absolute was something I knew before even I did my first web project. I seemed to know its meaning through intuition, that was fairly correct as well. Its meaning is to position an element absolutely on the screen, by specifying co-ordinates. You specify, top/left/right/bottom or/and width/height, the element is positioned absolutely on the screen with respect to the co-ordinate system. The subtle thing that came out after reading up some theory is that the element is taken off the normal flow and positioned absolutely.
The next important thing about positioning is knowing to position an element relatively within a container. Now the concept of a container is that, an element (usually a div) acts like a box holding other boxes inside of it. A div can be made to act as a container by positioning it relative (position:relative). Now, if elements inside of a container are positioned absolute, then they will be positioned relative to the container box and not relative to the screen (viewport).
The above knowledge of CSS positioning is fairly sufficient enough to do web dev-ing. There is yet another thing called position:static which doesn’t have much importance because elements by default are positioned static (they are positioned as they would appear in the normal flow). Yet another positioning is position:fixed which positions the elements as per the offset properties, relative to the viewport, the only difference in this case is that even if the window is scrolled, the fixed position elements stay afloat.
Another theoretical know-how is the use of position:relative on a standalone element. If position:relative is used on a element in a stand alone fashion with offset properties applied (like top/left/right/bottom), what happens is that the element is laid out as it would position in the normal flow and then the relative sizes are applied with reference to the normal position. It should be noted that the space occupied by the element in the normal flow is kept intact.
Positioning is also synonymous with "layering" or "stacking" Because using positioning, elements can be placed one over the other. In this context, there is a property called z-index which implies the depth of the placements of elements. Sure enough, there is a mess in rendering elements with z-index in some cases in browsers like IE.
If you are looking for a hands-on try, use firebug along with the scenario text at URL[1]
[1] http://thanix.info/webdev/basics/position-1.html
Keep me posted on your thoughts to: thanix[at]gmail[dot]com
Written by thanix on December 12th, 2007 with no comments.
Read more articles on basic and webdev.
Taking a break does really have its own effect! Like, when you gym — your body is in action and it really frees up the clogged mind.
Whatever you do, your mind just goes on and on, thinking of everyday actions, philosophies, girls and what not! As I said in my previous post, Fitness takes in some motivation from you and gives back a lot of it!
One thing is sure, Fitness is not about how comfortably you can do it, its all about how uncomfortably you do. I hope you can see what I’m getting at. If you can comfortably, say, lift ‘x’ kg of weight, thats not getting you anywhere. What you must attempt is to lift ‘x+y’ kg of weight whatever that ‘y’ is — the condition should make you uncomfortable, to the extent that you give in more of yourselves to do that.
If you see, this applies to just everything you do in life. The more uncomfortably you do something, your system adjusts itself (as in builds its own strength) to withstand that, the next time you do it. The only important thing, ofcourse, is that you should make sure you continue on this.
Written by thanix on December 7th, 2007 with no comments.
Read more articles on fitness and health & wealth.
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.