I can float can you?

1 02 2010

Floating a column with css is not really that hard of  a concept to understand. With all things though in theory versus application there are flaws that i stumble upon. When it comes to adding margin, padding, and borders I tend to forget that it always adds to the width of  the container. Needless to say it gets a little frustrating when I’m creating a site and it just won’t respect me. I like the diversity floats can add to the content of a web page. In researching css floats I ran across some things that I had no idea about. Like z-index it creates a stack order of elements. Before I had problems placing text over images without placing them as back-ground elements. Floats have different position values also called absolute and relative. I haven’t truly used these things to there full extent. On yourhtmlsource they reiterate the use of these position possibilities and have a few examples to illustrate.  On the article found on smashing magazine “The Mystery Of  CSS Float” it addresses on of the problem that i have ran into and often do. Its when an object doesn’t want to stay inside the intended box it tells one how to fix such problems. Another site called complexspiral.com talks about this and has a little better illustration with code  that shows you how to fix it. Heres a site i found on clearing floats. It seems so simple but when not done right it will become a headache.




3 responses

3 02 2010

Thanks for sharing The Mystery of The CSS Float Property. I found it useful and tagged it in Delicious. I could have used the :after pseudo element in this weeks iPad exercise.

4 02 2010
Salvador Najar

Well only padding and borders add extra width/height to your containers/content area. Then needing to do a little math to figure out what your width/height need to be set at to accommodate the extra sizing. Margin will physically move your content around and give it space but doesn’t add extra sizing to the width/height of your content.

4 02 2010

ya i’ve been doing that a lot. Before i didn’t really understand that and was building sites all willy nilly. Thanks for the heads up though.

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: