Posted by David Graham on 12/14/17 11:44

Hi
I have been trying to understand a thread Re: Help needed with css layout
problems posted 21/03/006

http://homepage.ntlworld.ie/spartanicus/HCS/masthead.htm

I removed the empty div using FF developer toolbar (great thing that
toolbar) and to my surprise the logo on the left disappeared as did the blue
coloured background of the parent masthead div and the 1px white line of the
child div. I solved the problem of why the logo goes - it's white letters,
therefore not seen without the blue backgound, and the white line goes
because it's the background colour of the empty div I've just removed.

#masthead div{clear:both;height:1px;background:#fff;font:0\0}

The clear:both is obviously doing a lot of work here but why does it's
presence mean the blue background of the parent masthead div gets displayed
and not without it?

Is the greater specificity the reason why this white background does not get
over ruled by the blue background of the parent masthead div or it simply
due to the stacking order i.e. the child div is more infront than the parent
div?

Hope Mr Spartanicus is around or one of the guru's

thanks for any help
David

[Back to original message]