Friday, September 7th, 2007
Ajaxian Featured Tutorial: Understanding CSS floating
Category: CSS
One of the hardest concepts to grasp in CSS is how to float elements. In order to create a good layout you need to understand this concept in order to know how your elements will be handled within the flow of your page.
The team at Max Design have created an excellent tutorial, aptly called the Floatutorial, which provides a step-by-step explanation of how floating works.
Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.
3.8 rating from 29 votes
Slow day? That page has been around for years.
@Gregory: Not at all. If you look at the amount of content on Ajaxian today, you’ll see it’s a very busy day. I’m trying to provide tutorials for a variety of developers; both new and experienced. This page may be old to you but not to everyone and its a great explanation of a concept that new CSS developers struggle with.
This is a bit dated, but still useful. One note, don’t forget to add display:inline; when floating elements for IE 6 – otherwise you’ll get the “double margin” bug (see related)
Excellent article. Not everyone on this site has as much design/css/usability knowledge (myself included) and these kinds of articles are usually those that have slipped under our radar. I’m very grateful for its posting and hope to see more like it in the future.
@Scott: Thanks for the info
@Jesse: My pleasure. Its precisely why I wanted to post this type of tutorial. I know that many of these may not appeal to experienced developers and I’m okay with that. My intentions with the Ajax Featured Tutorial series is provide information that will help introduce developers to important JavaScript, DOM, Ajax, RIA & CSS concepts. I especially want to focus on developers who are new to these technologies as they are the ones that, at times, find it hard to get the right information. With that said, I will be posting tutorials for advanced developers as well.
yeah, thanks for the article. I too don’t have good knowledge on CSS.
Great for new developers! But why not learning them to good scripting (like instead of provided )
Thanks Ray, this was a great tutorial.
@MysticEarth: I’ll be posting tutorials on a variety of topics.
@Silent & Van: Thanks! :D
@MysticEarth
I think that they are all related. A lot of really nice ajax solutions get created because of problems being addressed in the (generalizing a bit) css / design / usability / humane design – space. The two go hand in hand towards driving more innovation and more need for various types of tricks – which sometimes result in javascript being used.
I don’t think you’d be doing yourself any favors by learning one and not the other.
these are a little 101, but that’s alright, I like what Rey is doing …personally I love the Gears and AIR tutorials. Please keep them flowing. (i assume memcached is outside the realm of Ajaxian??? probably so, that’s obviously up to you guys, but I’d love some tutorials on memcached if possible)
Thanks for the information, Rey. I have been a developer for the past 18 years, but I have never really done any web development until now and this indeed is new to me. I admit it. :)
@Mark: I’ll see what I can dig up. Thanks for the suggestion. If you have anymore ideas for tutorials, especially advanced ones, please feel free to email me at reybango (at) gmail (dot) com
@Kerry: I’m glad you found it useful. :)
PHP this, RoR that… I was hoping Rey would have some CFAJAX tutorials, heh… take a look at the topics sidebar: PHP (75), Ruby(50) + Rails(25) = 75, and ColdFusion (5).
Patience Mike. :)
Why don’t any of these float tutorials mention the block formatting context – the most important CSS concept related to floats. Sheesh!
…will do, Rey, thanks
@Jesse Kuhnert:
I see my post wasn’t posted good :) What I tried to say is why not start with good coding (like closing a BR element, which isn’t closed in the example provided). It is a good tutorial, and a good start for floating.
But I think the best start is creating proper code. With no proper code, bugs and other CSS problems (especially browser specific bugs) can occur much faster and are more difficult to debug.
For another in-depth floating tutorial/article, check this out: http://www.digital-web.com/articles/web_design_101_floats/
Here is good tutorial about CSS :http://gohil.dharmesh.googlepages.com/css.html
Here is good tutorial about AJAX :http://gohil.dharmesh.googlepages.com/ajax.html