Trouble with overflow:auto
I have these sections with headings, where the Background goes outside the box (to look like a ribbon). But the height needs to be adjustable to accommodate long titles, and the inner container would go outside of hte containing div. So I put an overflow:auto on the outside div, but that cuts off the outside part of the ribbon.
You could insert a breaking element right before the close of the inner container you want to stretch (something like
BUT, that's adding unnecessary markup.
Your better (and more proper, in my opinion) option is to fix it in CSS. You'll want to use a clearfix on the overall container. Your best option is to add a CSS clearfix class. I prefer the "Micro Clearfix" hack, which I applied to your code here:
EDIT: Pre-clarification answer:
You'll need to let the height size itself. So, set a
min-height and use
background-size (but be careful with backwards compatibility) to stretch the background.
The problem is, your background isn't going to stretch well. So, you might want to rethink how much text you're going to allow in that banner.
Here's an updated jsfiddle:
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here