2 replies [Last post]
SooTyLaD
Offline
newbie
Cannock
Last seen: 10 years 18 weeks ago
Cannock
Timezone: GMT+1
Joined: 2010-04-07
Posts: 2
Points: 3

Hi Everyone,

Ok, so its not "inherited" since the code is filtering though from a child, so its kinda backwards but...

www.madversion.com

I have uploaded an example of the problem at hand... if you notice the red #container div should be flush with the top of the page, and the #content div should be 20px lower... however what is actually happening is that the #content div is in the right place but #container also gets the 20px gap Puzzled

Its something that happens to me time and time again and i don't understand it... when a margin is needed and padding can't be used, how do i do this? is it maybe a css bug or am i doing it wrong?

note: I have noticed that adding a border to the #container fixes it, which is strange (but obviously, I want a proper solution without a border Wink)

Thanks chaps Smile

SooTyLaD
Offline
newbie
Cannock
Last seen: 10 years 18 weeks ago
Cannock
Timezone: GMT+1
Joined: 2010-04-07
Posts: 2
Points: 3

Have I asked a question that

Have I asked a question that uncovers a huge bug and is actually taboo to talk about Tongue

This problem can be hacked by adding float:left and clear:both or border-top to the #container, but i'd prefer to fully understand the problem rather than hack my way through it...

Anyone?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The fact that you say

The fact that you say inherited from a child and then state floating parent or adding border-top to parent fixes the issue immediately tells us you have stumbled on the condition known as 'Collapsing Margins' it's not a bug but a proscribed behaviour. A quick search through the forum archives will throw up old posts on the subject or Google.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me