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:

enter image description here

Here’s what I want:

enter image description here

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.

`overflow: hidden` (or any other value than `visible`) causes a box to create a block formatting context in which to contain floats. The expansion of the box to fit its floats is just one of the side effects when the box has `height: auto` (no explicit height). I can't find any explanation for *why* exactly a `overflow` that isn't `visible` creates a BFC, but it does. — BoltClock, Mar 30 '12 at 11:43
What is that supposed to do when you resize the viewport [like here](http://jsfiddle.net/YvEcK/)? — user123444555621, Mar 30 '12 at 12:07
@Pumbaa80 I think it makes sense for it to do exactly what’s shown in your fiddle. The real website layout is such that the image is only 100px wide, whereas the parent of this container is min-width 500px or so, thus never running into that situation. — Roman Starkov, Mar 30 '12 at 12:13
@BoltClock It would indeed be interesting to know why that is the case. I can’t see anything [in the spec](http://www.w3.org/TR/CSS21/visufx.html#overflow) to this effect; isn’t this behaviour a violation of the spec then? — Roman Starkov, Mar 30 '12 at 12:41
@romkyns: BFCs are discussed in [this part of the spec](http://www.w3.org/TR/CSS21/visuren.html#block-formatting). Since `height: auto` tells an element to be sized vertically depending on its contents, it'll expand to contain the entire floated image since it's now part of the same BFC. Therefore this is expected behavior. — BoltClock, Mar 30 '12 at 12:41
This effect of stretching the height of the container is documented [here](http://www.w3.org/TR/CSS21/visudet.html#root-height). I'm finalizing an answer to your follow-up question right now. Sorry I took so long to get back to you! — BoltClock, Aug 07 '12 at 21:00
@BoltClock no problem, the follow-up question wasn't a pressing issue anyway - more of a horizon broadening exercise. Thanks! — Roman Starkov, Aug 07 '12 at 21:04

score 3 · Accepted Answer · answered Mar 30 '12 at 11:44

3

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.

answered Mar 30 '12 at 11:44

T. Junghans

11,385
7
52
75

Thanks, I think your solution will be acceptable, will try and see. I am curious, however, as to why you think overflow:hidden makes no sense without an _explicit_ size. Note that the parent element has a definite size _regardless_ of whether any sizes are set explicitly. – Roman Starkov Mar 30 '12 at 12:09
With parent element do you mean the **div**? Its height depends on its contents (if no height is specified). The div cannot grow with the text and ignore the image height. overflow can only hide when it has a boundary, that's why I say it makes no sense. – T. Junghans Mar 30 '12 at 12:12
I do mean the div. Without overflow:hidden it _does_ grow with the text and ignore the image height. In this situation, the div has known borders, the image has known borders, so the only thing left is to intersect them and crop the image accordingly. Isn’t this perfectly well-defined? – Roman Starkov Mar 30 '12 at 12:16
Right of course, your screenshot shows this perfectly. But that's also thanks to float: left. Remove float: left and you'll get what I'm talking about. – T. Junghans Mar 30 '12 at 12:22
I see what you mean now. It would still have worked, of course; the image would cause the div to grow to prevent overflow, unless constrained by something like max-height. – Roman Starkov Mar 30 '12 at 12:27

score 2 · Answer 2 · answered Mar 30 '12 at 11:49

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)

score 0 · Answer 3 · answered Mar 30 '12 at 11:27

0

I seen a post over at CSS-Tricks and it talked about this. Go check it out at - http://css-tricks.com/minimum-paragraph-widths/

It might be useful :) Good luck

Also just looked at your code and I added float: right to your div so it looks like this -

div {
border: 1px solid black;
padding: 10px;
float: right
/*overflow: hidden;*/
}

Not sure if that's what you want?

answered Mar 30 '12 at 11:27

Jack-T

151
1
2
11

Just tried that - it doesn’t seem to make the result look the way I showed in my question, which means it isn’t what I want :) – Roman Starkov Mar 30 '12 at 11:32

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

3 Answers3

Linked