CSS Tip

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.

1 Comment »

  1. Topper Bowers said,

    April 13, 2008 @ 11:55 am

    Well:

    While those BRs are sometimes necessary or expedient… they are generally frowned upon. The better way is to style the element below the floated text to have a style of “clear: both;” and in its CSS (not a style= attribute).

    Also, sometimes IE doesn’t like a BR tag for clear (which is strange) and would prefer a DIV… though I don’t really have an idea of “why.”

RSS feed for comments on this post · TrackBack URI

Leave a Comment