This is a blog that was created to talk about web design. The both of us hope people can learn from this, even learn something ourselves maybe.

Tuesday, January 04, 2005

Simple Trick You Need To Know!

I ran across this problem the other day and I was stumped by it. I had a <p> set of tags, in which I placed a floated image. What was the problem? Well in Mozilla browsers the <div> that contained the paragraph would not stretch it's height to cover the paragraph, because the image was floated (and thus it assumed the paragraph was empty since nothing else was in there). This is a feature and it was mystifying at first. The solution? After the paragraph I created this div:

<div style="clear: both;"> </div>

What does this do? The clear property is set to both which means that nothing is allowed to reside to either side of this div. Since it comes after the paragraph I talked about in the semantic flow of the document, the containing div stretches it's height to cover this new div. One proviso - I had to place an nbsp inside the div to give it content, other than that it worked beautifully.


Post a Comment

<< Home