15 replies [Last post]
Mr_Green.com
Offline
newbie
Last seen: 13 years 46 weeks ago
Timezone: GMT-7
Joined: 2004-12-06
Posts: 5
Points: 0

I'm working on a web page and it is showing up with a space between the top div and the content div. I don't want to make up some messy hack to fix the problem and would like to learn about why this is happening. The CSS and HTML validate.

This is the test page I'm working with: http://lifespring.org/mainCSSnew.html

Any help and ideas are greatly appreciated!

Regards,

Philip

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

Empty space between divs

Hi Mr Green,

It looks to be the default margin around the 'h3' in the #menu.
Set margin 0 on that h3 and you should see the gap close.

Hope that's of help,

Hugo.

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

Mr_Green.com
Offline
newbie
Last seen: 13 years 46 weeks ago
Timezone: GMT-7
Joined: 2004-12-06
Posts: 5
Points: 0

Empty space between divs

Thanks for the reply!

Unfortunately, trying what you suggested did not work for me. In fact, I can't make any margin for the top of the sidebar, menu, or menu h3 divs do anything. I tried adding margin: 0; (as well as other quatities like 15px) to all those divs and others with no luck. I made sure to remove any other margin in those divs before adding margin: 0; this is strange.

I would appreciate any further help available!

Regards,

Philip

Edit: I commented the sidebar and menu ids completed with no change. I then added: h3 {margin:0;} That works, but it is not a good option for the website. Is there another way to go about this? Thanks!

Mr_Green.com
Offline
newbie
Last seen: 13 years 46 weeks ago
Timezone: GMT-7
Joined: 2004-12-06
Posts: 5
Points: 0

Empty space between divs

Okay, I fixed it by adding a blank div before the sidebar with class="topmargin" and added .topmargin{margin: 0;} to my CSS.

If anyone knows a better way to do this or can explain why this happens, I would love to hear it.

Thanks, Hugo for your tip! I wouldn't have known where to look.

Regards,

Philip

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 4 hours ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9703
Points: 3779

Empty space between divs

Hugo wrote:
It looks to be the default margin around the 'h3' in the #menu.
Set margin 0 on that h3 and you should see the gap close.
There is also the top margin for p in #main. I think both need to be {margin-top: 0;}.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

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

Empty space between divs

kk5st wrote:
There is also the top margin for p in #main. I think both need to be {margin-top: 0;}.

Missed that one Smile

Philip, would #menu h3 {margin-top:0;} not work ? rather than have to add an extra div.

I noticed a little problem with your header image , you have tried positioning with a combination of keyword and length. which won't work .You can combine % and Px but not keywords and % / px
you should find that the default positioning is ok, so you could loose the positioning altogether otherwise use ' left center' or '0% 50%'

Hugo.

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

Mr_Green.com
Offline
newbie
Last seen: 13 years 46 weeks ago
Timezone: GMT-7
Joined: 2004-12-06
Posts: 5
Points: 0

Empty space between divs

Hugo wrote:
kk5st wrote:
There is also the top margin for p in #main. I think both need to be {margin-top: 0;}.

Missed that one Smile

Philip, would #menu h3 {margin-top:0;} not work ? rather than have to add an extra div.

I noticed a little problem with your header image , you have tried positioning with a combination of keyword and length. which won't work .You can combine % and Px but not keywords and % / px
you should find that the default positioning is ok, so you could loose the positioning altogether otherwise use ' left center' or '0% 50%'

Hugo.

No, it doesn't work (unless I'm missing something). I have made the changes to http://lifespring.org/mainCSSnew.html removing the extra div and adding the margin statements you mentioned, but the blank space is back.

Thanks for your help!

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

Empty space between divs

Ah it's a combination of two margins ;
the #menu h3 and the #sidebar top margin of 15px

So as long as you can live without the margins then :

#menu h3{margin-top:0;}

and #sidebar{margin-top:0;}

should clear it .

Hugo.

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

wisbin
Offline
Enthusiast
Netherlands
Last seen: 13 years 51 weeks ago
Netherlands
Joined: 2004-10-28
Posts: 71
Points: 0

Empty space between divs

try a border on that #page and see it snap to the bottom of the #top.

why is that.. i duno.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 4 hours ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9703
Points: 3779

Empty space between divs

In #content, do {border: 1px solid transparent;}.

You can ignore the p and h3 top margins. They don't have to be zeroed once the border is in place. It is a collapsed margin thing. I just don't recall where I read about the border fix. Sad It's not a hack, rather it conforms to How Things Work. Oh happy day. Laughing out loud

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 4 hours ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9703
Points: 3779

Empty space between divs

I wrote:
I just don't recall where I read about the border fix. Sad It's not a hack, rather it conforms to How Things Work.
I knew it would be either Big John or Eric Smile See Uncollapsing Margins.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

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

Empty space between divs

Yes it is essentially a collapsing margin effect with the elements breaking out of the box, it's a strange effect when you normally just think of two adjacent margins halving themselves and although you say that the margins on the h3 and the sidebar can be ignored it's more a case of whether they are really needed as they are the cause.
Borders are a method laid out in the spec for coping with the effect so your right it's not a hack to employ them for this fix but also you can use a small amount of padding to clear the problem and force the margin back into it's container.
So there are loads of options now Smile you could give the #page a 1px padding and remove the #sidebar top margin or go with the trans borders or the original zero margins h3 / #sidebar; the choice is yours!

Hugo.

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 4 hours ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9703
Points: 3779

Empty space between divs

Hugo wrote:
Yes it is essentially a collapsing margin effect with the elements breaking out of the box, it's a strange effect when you normally just think of two adjacent margins halving themselves

Collapsing margins aren't the hardest concept to wrap your mind around, but they're not the easiest by a long shot. Unlike a dendrologist thinning a woodlot, the margins are not averaged. Two abutting elements of 10 and 20 pixel margins will not yield a separation of 15px, but of 20px. The same method applies to nested elements and their containers. The larger margin controls.

Quote:
and although you say that the margins on the h3 and the sidebar can be ignored it's more a case of whether they are really needed as they are the cause.

By ignore, I meant they would not affect the separation between their containing divs. Whether they are desired or not is a design consideration, one that no longer has unintended consequence.

Quote:
Borders are a method laid out in the spec for coping with the effect so your right it's not a hack to employ them for this fix but also you can use a small amount of padding to clear the problem and force the margin back into it's container.

After reading Meyer's article, it became obvious that a padding or border would have to confine the nested element. I wish I had made the connection on my own. Smile

Quote:
So there are loads of options now Smile you could give the #page a 1px padding and remove the #sidebar top margin or go with the trans borders or the original zero margins h3 / #sidebar; the choice is yours!

I can already think of several stylesheets that are due some cleanup Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

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

Empty space between divs

KK5st, By the look of the time stamps on our posts, we were reading the same article at the same time Smile

kk5st wrote:
Collapsing margins aren't the hardest concept to wrap your mind around

No they aren't the hardest but they can be deceptive in their manifestation, easy to overlook as a phenomenon occurring.

kk5st wrote:
Unlike a dendrologist thinning a woodlot, the margins are not averaged


Love the analogy Smile I didn't put that well, meant when two equal margins meet instead of a space double the individual margins one effectively disappears giving the impression of half the margin distance expected.

KK5st wrote:
After reading Meyer's article, it became obvious that a padding or border would have to confine the nested element. I wish I had made the connection on my own. Smile


You and me both, I kept ignoring a little voice inside my head that was saying "Collapsing Margins" probably because I didn't really have that good a mental picture of their nature ( thought I understood the concept, clearly, not well enough!)

This has been a useful lesson Smile now wander off to look through old style sheets to see if I can spot any Smile

Andy Budd has a simplified explanation similar to Meyers here

Hugo.

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

Mr_Green.com
Offline
newbie
Last seen: 13 years 46 weeks ago
Timezone: GMT-7
Joined: 2004-12-06
Posts: 5
Points: 0

Empty space between divs

Thank you all for your help!

I like the border idea as that seems the most simple, but unfortunately IE doesn't understand transparent borders and makes it black. So I went with making the top margins on #main h3 and #sidebar.

This is an interesting phenomenon and I can safely say I don't understand it. I am looking at the article for more understanding and to avoid this in the future. Thanks for posting it!

Regards,

Philip

thirdcherry
thirdcherry's picture
Offline
newbie
WA
Last seen: 11 years 16 weeks ago
WA
Joined: 2007-07-02
Posts: 3
Points: 0

Space after DIV

This comment has been moved here.