overflow:hidden confusion, Can someone explain overflow:hidden to me and why it's working her Options

[Nicola]

Here's the story:

I have a page composed of 3 divs: header, navbar, body. I had a problem with the header, which contains an image floating to the left and 2 short headings. My problem was, when I didn't specify a height for the div, the image overflowed it and overlapped the navbar; but, when I did specify a height for the div, in cases where the browser is set to use a very large font, the headings overflowed the div and, again, overlapped the navbar.

First I tried adding display:block to the img css, but that did nothing. Next I followed a suggestion to add overflow:hidden to the div css, and this did work, but why? According to the definitions I read of this declaration/value, the overflowing image should be clipped, but instead the div stretches to accommodate the image. I've tested this on all the main browsers in default and weird configurations and it really does seem to work but because I don't understand why I'm afraid it will backfire somehow!

[pandy]

Could we see?

[Nicola]

Sure. Really though, I just would like overflow:hidden explained to me. How does it work?

This post has been edited by Nicola: Mar 2 2010, 12:07 PM

[pandy]

Looking at your page, I think you confuse overflowing with wrapping. Use another background color for div.header and it's easier to see what's going on.

If I shrink the window, the text starts to wrap and the DIV expands its height to accommodate it. First when the window is so small that the widest item that can't wrap, the word "Workpeace", is affected, overflow comes into play and cuts it off. I can't see any overlapping at all. What browser do you see that in?

I'm not sure what you want to happen. Do you really want the text to be cut off and become unreadable in a small window? If that's the case, I think 'white-space: nowrap' would do it for you, at least in newer browsers. I wouldn't recommend that you make text unredable though.
http://www.w3.org/TR/CSS2/text.html#propdef-white-space

[Nicola]

Thanks for your help!

However, I'm not sure we understand one another.

First off, you didn't see any overlapping because there hasn't been any since I put overflow:hidden into the div.header CSS. The reason I posted this question wasn't to find out how to make anything new happen, but rather to find out why what I did do was successful.

I don't want to make the text unreadable, that's for sure! I like how the text wraps and the DIV expands its height to accommodate, as you observed. But, since you mentioned it: I don't like how single words are cut off (as you observed with the word "Workpeace" on a small enough window). I hadn't concerned myself with this before because I figured it's highly unlikely anyone would use such a small window, but if there's a quick fix for this, I'd like to do it. Is this happening as a result of overflow:hidden?

I really think it might help me if you would explain what overflow:hidden is supposed to do, in your own words (I've read other brief explanations but they didn't make sense to me.)

This post has been edited by Nicola: Mar 2 2010, 04:01 PM

[pandy]

Just remove the 'overflow: hidden' then. You must have used a height when you saw the overlapping. Just let things be and they'll behave as you want. Provided I understand what you want. I'm not totally sure.

[Nicola]

I can see I'm not making myself clear. What I want is really just for someone to explain overflow:hidden to me in layman's terms. What is it's purported function? How do people use it? Etc. I've read some definitions online, but they don't make sense to me.

If anyone can explain why overflow:hidden is working in my particular context, I'd consider it a bonus. In case anyone's interested, I'll try and explain myself again (but if someone could just explain overflow:hidden to me in general terms, I would appreciate it):

The problem:

You're right; when I saw the IMG in the top DIV overlapping the following DIV, I did assign a height to the top DIV. However, that resulted in a new problem: the DIV no longer expanded according to its textual content, so when the window was made small, or when the minimum text size was set very large, the text overlapped the following DIV.

The solution:

I removed the height definition from, and added overlap:hidden to, the top DIV. This worked well: now the top DIV accommodates both IMG and textual content (with the exception of independent words, as you discovered and we've discussed).

My question and purpose in posting here: why did this solution fix this problem?

This post has been edited by Nicola: Mar 2 2010, 05:56 PM

[pandy]

I can see I'm not making myself clear. What I want is really just for someone to explain overflow:hidden to me in layman's terms. What is it's purported function? How do people use it? Etc. I've read some definitions online, but they don't make sense to me.

Its function is exactly what you've seen displayed. It's just that it doesn't suit your needs. 'font-size: 1000%' wouldn't look nice either. That doesn't men it doesn't has its uses.

CODE

I removed the height definition from, and added overlap:hidden to, the top DIV. This worked well: now the top DIV accommodates both IMG and textual content (with the exception of independent words, as you discovered and we've discussed).

Because now 'overflow: hidden' doesn't come into play. Not before the window is smaller than the largest item that cannot wrap. It doesn't do anything for you. Just remove it. What you want is the default behaviour.

Look at this in a browser. Here 'overflow: hidden' is useful, right?

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>

<title></title>

<style type="text/css">
.item      { width: 40%;
             border: 1px solid #999 }
.header    { width: 100%; height: 400px;
             overflow: hidden }
</style>

</head>

<body>

<div class="item">
<div class="header">
<img src="http://www.interweb.in/attachments/pc-wallpapers/15491d1221474293-nature-wallpaper-forest-wallpaper21.jpg">
</div>
<p>
Blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah bla blah...</p>
<p>
Blah bla blah...</p>
<p>
Blah bla blah...</p>
</div>

</body>
</html>

[Nicola]

Just remove it. What you want is the default behaviour.

If I "just remove it," the image in the first DIV will overlap the second DIV: I don't want that.

On the other hand, if I remove it and define an appropriate height, the text in the first DIV will overlap the second DIV when certain browser modifications are performed (previously explained): I don't want that, either.

What I do want is what I have: a DIV that accommodates both text and images, without allowing any overlap onto subsequent DIVs. My purpose here, then, isn't to fix anything or change anything, but rather understand WHY what I do have is working how it is.

Its function is exactly what you've seen displayed.

Please take me at my word and believe that I do not understand its function and would like it explained to me in general terms. It may be self-explanatory to you, but it isn't to me. Maybe you're right and reading the explanations won't help me; but, maybe I'm right and they will. Will anyone indulge me?

This post has been edited by Nicola: Mar 2 2010, 07:28 PM

[pandy]

If I "just remove it," the image in the first DIV will overlap the second DIV: I don't want that.

I thought we agreed that only happens if you use a height. Don't use a height. Don't use overflow. What you describe as what you want is the default behavior. You don't need to do anything to make that happen.

Its function is exactly what you've seen displayed.

Please take me at my word and believe that I do not understand its function and would like it explained to me in general terms. It may be self-explanatory to you, but it isn't to me. Maybe you're right and reading the explanations won't help me; but, maybe I'm right and they will. Will anyone indulge me?

OK, I'll try. Overflow decides what should happen to content that doesn't fit in its container. The normal, default, behaviour is 'overflow'. The point that I think you miss, is that normally you don't limit both width and height of an element, the DIV in this case. Then it's free to adapt. It will exapand to accomodate its growing content and you never have to worry about overflow. It's first when the container theatens to burst overflow is of interest. If you don't create the broblem, you don't have to solve it.

You don't have this problem with the LIs and the Ps in your page. They expand to fit what you fill them with. So would this troublesome DIV if you just left it alone.

Why did you want to use a height and overflow in the first place? Did you have problem you thought it would solve or did it just happen?

[Darin McGrew]

The overflow property simply tells the browser what to do if the content of an element won't fit in the display area available to the element.

It looks like the overlap is caused by floating the logo.jpg image. Nothing clears the float, so the image is ignored when determining the location of the div elements.

[pandy]

Was THAT the issue to start with? Didn't even occur to me.

[Darin McGrew]

I didn't notice it until I turned off the overflow property. I'm still not sure why the overflow property causes the containing div to stretch, as though something cleared the float before the end of the div.

[pandy]

Looks like we aren't keeping up with the hacks. Are we getting old?

Found this (from the css-d wiki)
http://www.quirksmode.org/css/clearing.html

A border and overflow set to something other than visible (I assume - haven't read it all yet) is all that's needed.

[pandy]

Or isn't the border needed?
http://tjkdesign.com/articles/clearing-flo...ing_context.asp

"This method relies on creating a new block-formatting context in decent browsers and on giving the container a layout in IE Win"

Uhu? A new block-formatting context... Why is that?

[Nicola]

Wow, that was a lot of rigmarole just to get back to square 1. Thank you Pandy for your perseverance, and thank you Darin for illuminating Pandy! I guess my question now is, should I be concerned? I mean, am I relying on an unstable hack? Is there some better way to do this? Etc.

[pandy]

Since what you do causes other problems, I think you should use another way to clear the float.
http://css-discuss.incutio.com/?page=ClearingSpace

P.S. You said you wanted to understand how overflow: hidden work...

[Nicola]

I haven't encountered any problems, but thanks a lot for the link, I will check it out