Css Float Layout

August 3, 2009

hum.. what have i learned about float layouts.. well i have experienced that when setting up the with percentage.. u should leave some room for error since its not always 100% which is stated in Float Layouts @ Autistic Cuckoo.

“For one, the box being floated should have a width defined for it, either explicitly or implicitly. Otherwise, it will fill its containing block horizontally, just like non-floated content, leaving no room for other content to flow around it. Second, unlike boxes in the normal flow, the vertical margins of a floated box are not collapsed with the margins of boxes either above or below it. Finally, a floated box can overlap block-level boxes adjacent to it in the normal flow.”

—- Smashing Magazine :  CSS Float Theory: Things You Should Know

“You can float elements to the right or the left. Any element that follows the floated element will flow around the floated element on the other side.”

.. as said on about.com in the Using CSS Floats for Layout Article.

You would think that only the element you tell to float would float. but nope everything that follows also floats that way!


3 Responses to “Css Float Layout”

  1. Danny Says:

    I love the concept of float layouts, and the idea is simple enough. However, I still get a little confused on the math of it ( sounds stupit I know). But it gets me everytime! I am anxious to get to the point where I am more fluid with it all.

  2. Katie Says:

    My problem is I always forget the math part. I usually have the width of the container and then completely forget about padding and margin for the rest of the columns inside it. I’ll get the hang of it though.

  3. logojones Says:

    Im going to have to read the the article on float theory. You and Katie have the same one. Whats your favorite part of float? I see how you mentioned that people blame float for several different problems with the way it floats things around it. Im going to search for tutorials or links that show this because i think thats what they mean by breaking float

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: