CSS Trick: Getting content wrappers to wrap
July 30th, 2007 by Dustin Brewer
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 cause for the issue
The first reason that this may happens 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 reason 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 comment or message me about it.
Next week…
Next week I will tackle the various hacks to get two divs to match each other or pseudo match each other so that their background images or colors will be the same height regardless of which has more content. This can be a daunting task but there are multiple ways to overcome it.
Popularity: 7%
March 25th, 2008
This is fantastic, the br with clear both solved a problem that has frustrated me for weeks, and I have found nothing else to help me anywhere on the net! Thank you so much!
May 26th, 2008
First of all, teh div container will never wrap around FLOATED content. This is how it works by DESIGN (w3c ppl wanted it this way). If you want to wrap floated content DO NOT USE depracated BR tag (!?). Haven’t you heard about overflow:hidden property ? Just set this it in your wrapper and it will work like a charm. This doesn’t work with old IE6, but setting fixed width for the wrapper will do the job.