Floating elements using CSS
I have been reading a lot about floating elements using CSS. I played with it some on my last homework assignment but everything did not lay out as perfectly as I had hoped in every browser. Some browsers rendered the page how I intended, while others did not. After having Mr. Batchelder help me resolve that issue I decided I should read up on this so that I can be more proficient in floating elements correctly within the constraints of my layout.
The first article I read, Float Layouts on The Autistic Cuckoo, was very informative, even though a few paragraphs got a little confusing causing me to re-read them several times. The last portion about floating columns where he gives an example of how to keep the main content as the center column while still keeping it as one of the first elements in your XHTML markup was hard for me to grasp, but I think if I play with it using his example code I could figure out exactly what he is talking about.
CSS Float Theory: Things You Should Know by SmashingMagazine.com is sort of a Frankenstein’s monster of pieced together information from numerous articles about floating elements using CSS. It also links to all of those articles so if you are looking for a good article on the subject, I would suggest this one as the starting point. Even though they only use snippets of various articles, it makes it easy to understand the broad concept and rules involved in using floats. Alternatively, if you feel like getting into more detail there is always a handy link to read the whole article that is being quoted.
The third article I read didn’t seem to comply with well formed code and web standards. It talked about using hacks and empty divs to trick the CSS floating property into doing what you wanted it to do. But I think using the ‘clear’ property in CSS is probably a much better way to get the results you want from your layout using floating elements. I might be wrong, and it did have some additional useful information, so read it for yourself. Containing Floats.
I am excited to see what else can be done using floats, as well as other forms of CSS, to enhance my web pages layouts.
Katie said,
February 3, 2009 at 10:05 pm
See, you had to read about it and how it works; I can’t read about something and then understand it, I have to go play with it first and then my brain will comprehend it. Which is pretty much all I do with any mark-up tag; actually, its how I started web designing. My curiosity is so bad it could kill me.
If I need to know something badly cause I’m having a hard time with, then I’ll go look up tutorials.
airimpact said,
February 4, 2009 at 5:00 pm
I think the part I found interesting about the float element is that you could use it to wrap text around an image.
mabyerlyblog said,
February 5, 2009 at 1:23 pm
I finally got my book and was reading to catch up. Each thing I read about reminds me of a stuggle I had on my website so the material has meaning. I will especially liked that the articles I read on the internnet had the visuals with them so I could understand it better. I need to see it on paper or in my mind to grasp it. I have to try it out next for it to really gell.
rmspencer said,
February 23, 2009 at 10:09 pm
i found float layouts link to be very interesting, has helped answer a lot of questions as to why my floats keep going astray. where do you find this information?