Question

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.

Any ideas?

http://jsfiddle.net/S2p83/

Answer 1

You could insert a breaking element right before the close of the inner container you want to stretch (something like <div style="clear: both;"></div> or <br style="clear: both;"> 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:

http://jsfiddle.net/N2Mh7/

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:

http://jsfiddle.net/Dmm34/