Can I use overflow:hidden without an explicit height somehow?

Question

I have an image with float:left, and I’d like it to overflow its parent, but cut off the overflow. Here’s what it looks like without any overflow rules:

                                   

Here’s what I want:

                                   

Here’s a fiddle: http://jsfiddle.net/ZA5Lm/

For some reason, it was decided that overflow:hidden without an explicit height results in the element growing.

Can I somehow achieve the effect I’m after without setting an explicit height? An explicit height doesn’t work because I want this div to size automatically based on content length and browser width.

Answer 1

In my opinion using overflow: hidden without setting dimensions doesn't make sense. If you don't want to specify the height of the container and if your images have a fixed width you could use this solution: http://jsfiddle.net/ZA5Lm/11/

The image is positioned with absolute, taking it out of the text-flow. However - and I'm aware that this may be ugly - you need to specify a padding-left to move the text away from the image.

Answer 2

It's a bit tricky (I use relative + absolute positioning and a specific padding to position text) but it does the effect you asked without changing markup or setting height:

body {
    padding: 10px;
}
img {
    float: left;
    position: absolute;
    left : 10px;
}
div {
    border: 1px solid black;
    padding: 10px 10px 10px 280px;
    position : relative;
    overflow: hidden;
}

I just inserted style (even if float:left would be no longer necessary)