lifecoding.com Blog » CSS http://lifecoding.com/blog (define (life-coding life code) (organize life (using code))) Wed, 11 Jun 2008 03:29:55 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 CSS Tip http://lifecoding.com/blog/2006/06/05/css-tip/ http://lifecoding.com/blog/2006/06/05/css-tip/#comments Mon, 05 Jun 2006 15:13:37 +0000 Trotter Cashion http://lifecoding.com/blog/?p=28 Well, this is basic css, but I’ll throw it up here for those of you that don’t know or have forgotten (I managed to forget the other day). If you have an element with ‘float: left’ or ‘float: right’ inside a div, the div will not be tall enough to hold the floated element. Look:

I am crazy floating text. Watch out for me because I am so crazy. I will kill any and all layouts near me. Hear me roar!

I am the cool words to the right.

I am broken! I should be below the text that is to my left.



As you can see, the code above is definitely broken. To fix this problem, we need only insert a <br style="clear:both;" /> at the bottom of the div. Look now:

I am crazy floating text. Watch out for me because I am so crazy. I will kill any and all layouts near me. Hear me roar!

I am the cool words to the right.


I am fixed! The crazy floating text plagues me no more.

]]> http://lifecoding.com/blog/2006/06/05/css-tip/feed/ 1