Web Design Blog
Popular Posts
- Fonts on the web and a list of web safe fonts
- CSS Hack:Getting Safari to behave
- Top 10 search engine optimization techniques
- Top 10 job boards for freelance web designers
- Creating a photo gallery in CSS without tables
- Test IE5 or IE6 on your PC with IE7 installed
- CSS Trick: Target only IE with an if statement
- 8 job boards, for freelance web designers, that don't suck
- Open source Dreamweaver alternatives
Categories
CSS Trick: Getting content wrappers to wrap
Posted on Monday, July 30th, 2007 under CSS 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.
Whats Next?
5 Responses to “CSS Trick: Getting content wrappers to wrap”
Leave a Reply
About Dustin Brewer
Dustin Brewer is a freelance web designer based out of Oklahoma City, OK passionate about web standards, and beautiful web design. Dustin Brewer has been in the web design industry for over 8 years through freelance and professional experience. If you are interested in hiring Dustin Brewer please visit the web design services page to find out more information. You can also checkout my web design portfolio.
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!
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.
ohhhhhhh.. you my friend = an absolute genius! than you so much! love.x
Look forward to reading more from you in the future. check out my site and let me know what you think, its got other freebies as well as phone tricks, hope you like
Thank you Dustin. You already saved me twice.
regards,
Per