Margins causing overflow?

[daviddoria]

On this page: http://ewh.ieee.org/r1/schenectady/New/

I have two elements, "bluegradient" and "whitebox".

The bluegradient height is 80% (of the page, right?).

The whitebox height is 80% (I think this "80% of the height of the bluegradient" since it is nested, right?). The whitebox has top and bottom margins of 10% (this is 10% of the whitebox height, right?). Therefore the total whitebox should be 80 + 8 + 8 = 96% of the bluegradient height. However, a vertical scrollbar appears on the bluegradient (due to overflow: auto;) - but shouldn't the whitebox be small enough not to warrant this scrollbar?

Thanks,

David

[teedoff]

You also have 80% height on your body tag, thats whats causing the scroll bar. Remove that and the bar will disappear.

[daviddoria]

Hm, I see

body
{
height: 100%;
/*overflow: scroll;*/
}

I had to do that because apparently the 80% on the bluegradient doesn't work unless the parent (body) also has a height.

[teedoff]

Is there a reason you want a scroll bar? Most people that have pages of varying heights and therefore dont like when one page is short and the next page is longer, thereby adding a scroll bar on their browser. If thats what you're wanting. the you would add..... overflow: scroll to the html tag.

[daviddoria]

I was told to add the overflow: auto to the bluegradient in order to fix the collapsing margins. You can see now that the whitebox is at the very top of the bluegradient even though there is a top margin on the whitebox. If you have a better way to fix that, I'm all ears.

Thanks for your help on all of these issues,

David

[teedoff]

Here is a good explanation of the overflow property.

If the whitebox content were to be larger than the bluebox, then the overflow: auto would add a scrollbar to keep from content overflowing into the parent container. Provided of course you set a specified height to the whitebox.

The overflow property can also be used to clear floats and yes prevent collapsing margins. Read the linked page I gave you and the last use of the overflow is talked about.

I still see two navbars on your site though. Have you uploaded the page since you made changes?

[daviddoria]

Very strange - it was hidden (commented) in chrome but I indeed saw 2 in firefox! I removed the div one so now you will see the one I attempted to center via the UL tag that is still not centered:

http://ewh.ieee.org/r1/schenectady/New/

Also, those were good things to know about the overflow property, but I still don't get what I'm doing wrong. With the overflow auto, the scrollbar appears when I don't think it should. Without the overflow auto, the margin of the whitebox is not applied (i.e you can't see any blue at the top). Is there a better way to stop the collapsing margins besides the overflow property?

[ko ko]

How about the 'display: inline-block' ?

.bluegradient {
          display: inline-block;
}

I noticed this bugs for months. It commonly see when the first child element has set the vertical-margin.

[daviddoria]

Great - the stopped the collapsing margins. There is another overflow problem though - the gray background is larger than the screen - i.e. scroll bars (the real browser scroll bars) appear even though the content is not long enough to warrant them.

Thoughts?

[daviddoria]

I'll start a new thread for this - thanks for answering the original question :)