You ever had that frustrating div that would stop just short of wrapping your content like it is supposed to?

Usually this div will have a background image or color that you need to go all the way around the content.

There are cases where this has come up for me and there are usually two things you can do. One of them is to fix the problem as you have accidentally set a property to it that doesn’t need to be there in the CSS.

The other is you can add something to it to help wrap the div around your content. I’ll talk about both of these methods a little more in depth but they are quick and easy solutions for the stubborn div.

A possible solution for the issue

A reason that this may happen is that you have set a height to your div and it is obeying your command and staying at the height you have set.

The first thing you want to check is all the properties that are set on it and ensure that there isn’t a fixed height on your div. This can cause some problems, I’ve seen it happen where you accidentally set it for whatever reason and forgot to unset it once you started populating your site with content and can’t figure out why your div background image or color isn’t wrapping your content.

On to the tricks!

The other solution of course is another little trick that can help to get those stubborn divs to wrap properly. This is to set a br tag at the bottom of your div just before you close it with a style of clear:both. This will help your content wrap properly most of the time. I haven’t found a situation where one of these tricks (solutions) didn’t fix the problem.

An example of this is listed below for your viewing pleasure:

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

It is an easy little addition. If you want you could always apply a class to it but it is all about the same amount of typing and there isn’t much else you would want to do with that br tag.

At any rate, it is a quick and easy solution for problematic divs. If you have any questions or further troubles with similar divs or anything at all really… feel free to ask it in the comments or message me about it.

Related Posts