Question

HTML

<div class="wrapper">
    <div class="image"></div>
    <div class="copy">blabla</div>
    <div class="outside"></div>
</div>

CSS

.wrapper { width: 960px; margin: 0 auto; position: relative; }
.image { float: left; }
.outside { position: absolute; top: 0; left: -20px; }

I want .outside to extend outside the .wrapper, however there are two problems: as is, .wrapper does not extend down to accommodate for the floated .image; setting .wrapper to overflow: auto fixes the height issue, but hides the absolutely positioned .outside. How can I get both the height to stretch automatically and not have the absolutely positioned element be cut off?

EDIT: my wrapper is set to relative, sorry – forgot to add that. For further clarification, here are some crappy diagrams:

EDIT 2: I got it to work by adding a wrapper around the image and copy and setting it to overflow: auto. I wanted to avoid unnecessary markup, but oh well… Thanks everyone!

Answer 1

Resolved by adding an additional wrapper with overflow: auto around .image and .copy.