Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Trouble with overflow:auto

Trouble with overflow:auto

Problem

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/

Problem courtesy of: Syren

Solution

You could insert a breaking element right before the close of the inner container you want to stretch (something like

or
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/

Solution courtesy of: Matt Stauffer

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Trouble with overflow:auto

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×