Wierd CSS problems were Margins are not working!

Hey all,

Having a wierd CSS issue and no matter what our little team does, we cannot get these 2 lil wierd issues addressed. To see them go here:


As you scroll to the bottom of page, new DIVs load up.
Here are the 2 problems:

1- There is this 20 white px space between where the Video ends and the grayish panel containing the loading DIVs. We have set the Margin for both the class video_top and div bunch_holder to ZERO, but this white space is still there!

2- The 1st DIV loading, that is div id panel_1 is to have a 20 px margin-top between top it and top of the containing DIV which is bunch_holder, but that space is ZERO

What the hek is going on! How to fix this?


It is collapsing margins, see this link for more info.

You can fix it by adding a 1px top padding to this…

#bunch_holder {
    background: #d3d3d3;
    margin: 0px;
    padding-top: 1px;

Or you could also use overflow:hidden; if it doesn’t cause any intentional overflows to be clipped.
Any overflow value other than visible (the default)


Thanks. Your suggestion does work!
But it absolutely makes NO sense why adding a simple:
padding-top: 1px;
to #bunch_holder would address those 2 problems!!
And I read the document you provided, and it just does not make any logical sense!
Who the hek has come up with these cockamamie rules :slight_smile:


1 Like

The 20px space is the margin-top on the first div.

Another solution would be to apply the background colour (grey) to the common parent of the two adjacent elements (video_top and bunch_holder) which in this case is the body. The gap is the gap you asked for, it just wasn’t coloured in as you expected.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.