Overflow floating problems

[BrianJoe87]

Hello all

I have a problem I was hoping some of you might have a solution for.

I have a content div and a sidebar div next to eachother, and a topbanner _inside_ the content div. See image below.
[http://gratisupload.dk/billede/thumb/685882/full/](http://gratisupload.dk/billede/thumb/685882/full/ “Image 1”)

When the banner inside the content div overflows the content div, the sidebar overlaps the banner and stays in place. See image below.
[http://gratisupload.dk/billede/thumb/685883/full/](http://gratisupload.dk/billede/thumb/685883/full/ “Image 2”)

But thats not what I want. What I want is that when the banner inside the content div overflows, the sidebar has to float down beneath the overflowed banner. See image below.
[http://gratisupload.dk/billede/thumb/685884/full/](http://gratisupload.dk/billede/thumb/685884/full/ “Image 3”)

How would I do that?

The content div (with the banner inside) is floating left, just like sidebar.

[wolfcry911]

_How would I do that?_ You can’t (with CSS). Overflow content will have no effect on any type of element in any context. Is there a reason the banner needs to be inside the content div? If so, I think javascript is the only answer.

[BrianJoe87]

The problem is that, that it’s for a Magento template. And it’s within a part of a code, and I can’t go further up (over the content div) and place the banner. Hmm, I might have to rethink this out. I’ve been searching for some days now and it’s really bothering me, you know. :)

[Senff]

The only non-Javascript way I can think of, is a workaround more than anything else, really….. The banner and the sidebar are both floated within a wrapper, and the content div is positioned absolute. It’s a dirty solution (and comes with all the stuff you might not want) but does what you want to do with the banner and sidebar. See http://codepen.io/senff/pen/xuGJy

[wolfcry911]

@BrianJoe87, by chance will the banner always overflow? If so, you could use a top margin on the sidebar.

[BrianJoe87]

Thanks Senff, seems like a workaround, but I’m not going down that road, I guess.

Yeah wolfcry911, I’m going for the top margin. It’s the same size content thats going inside the banner, so I guess it would be fine.

Thanks both of you.

[Kitty Giraudel]

Why would you allow overflow? If the banner is inside the main container, then it is because it has to fit in there. Right?

[BrianJoe87]

No, actually it’s supposed to be _over_ the content div. But because of other issues in this Magento template, that are not worth the time to explain, it’s not possible.

But I’ve gone for wolfcry911’s solution.

[Author]

Posts