Jump to content

Problem with margin against margin


niche
 Share

Recommended Posts

My script displays two rows of boxes three boxes wide. Why is the center box of the second row high? I need it to be even with the left and right box.

<html><head><style type="text/css">div.ex{width:720px;height:985px;margin-bottom:0px;padding:0px;border:5px solid gray;}div.adv_topleft{float:left;width:224px;height:177px;margin:10px 5px 5px 10px;border:3px solid gray;}div.adv_topcenter{text-align:center;overflow:hidden;width:226px;height:177px;margin:10px 5px 5px 5px;border:3px solid gray;}div.adv_topright{float:right;width:225px;height:177px;margin:10px 10px 5px 5px;border:3px solid gray;}div.adv_nextleft{float:left;width:224px;height:177px;margin:5px 5px 5px 10px;border:3px solid gray;}div.adv_nextcenter{text-align:center;overflow:hidden;width:226px;height:177px;margin:5px 5px 5px 5px;border:3px solid gray;}div.adv_nextright{float:right;width:225px;height:177px;margin:5px 10px 5px 5px;border:3px solid gray;}</style></head><body><div class="ex">    <div class="adv_topleft">    </div>    <div class="adv_topright">    </div>    <div class="adv_topcenter">    </div>	<div class="adv_nextleft">    </div>    <div class="adv_nextright">    </div>    <div class="adv_nextcenter">    </div></div><div class="ex2"></div</body></html>

Edited by niche
Link to comment
Share on other sites

The script acts like the top center box doesn't have a bottom margin. So, I simply changed the top margin of the bottom center box from 5 to 10 and that fixed the problem, but I pretty sure that's not the best answer because increasing the bottom margin of the top center box pushed down the entire bottom row of boxes. What do you think?

Link to comment
Share on other sites

What browser are you using? In FF 3.6, both center boxes are pushed down a row so I get four rows. This is expected though because your math is a little off. The width of your container is 720 but by my calculations your boxes add up to 733.Your issue though is due to collapsing margins. Your solution of setting the top margin on the bottom center box is the correct way to do it.

Edited by ShadowMage
Link to comment
Share on other sites

I see what you mean about the container width. For some reason that didn't show up on my localhost, but did on my web server. While on the subject, how did you come up with the boxes adding up to 733? I came up with 724 ( (224+5+10+3) + (226 + 5 + 5 +3) + (225 + 10 + 5 + 3) = 724As for the collapsing margins, that's very descriptive of my problem. The CSS reference said horizontal margins never collapse, but they seem to be. Please confirm this observation. As for the vertical margins, I suppose they collapsed too, but I didn't notice until you pointed it out.So, adjusting the margins is the fix. I thought the answer would have been more elegant. Any idea why this is still a problem?

Link to comment
Share on other sites

I see what you mean about the container width. For some reason that didn't show up on my localhost, but did on my web server. While on the subject, how did you come up with the boxes adding up to 733? I came up with 724 ( (224+5+10+3) + (226 + 5 + 5 +3) + (225 + 10 + 5 + 3) = 724As for the collapsing margins, that's very descriptive of my problem. The CSS reference said horizontal margins never collapse, but they seem to be. Please confirm this observation. As for the vertical margins, I suppose they collapsed too, but I didn't notice until you pointed it out.So, adjusting the margins is the fix. I thought the answer would have been more elegant. Any idea why this is still a problem?
You only added a border width for 1 side of each box.(224+5+10+3) + (226 + 5 + 5 +3) + (225 + 10 + 5 + 3) = 724should have been(224+5+10+3+3) + (226+5+5+3+3) + (225+10+5+3+3) = 733Adding a DOCTYPE helps as well...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><style type="text/css">div.ex{width:733px;height:985px;margin-bottom:0px;padding:0px;border:5px solid gray;}div.adv_topleft{float:left;width:224px;height:177px;margin:10px 5px 5px 10px;border:3px solid gray;}div.adv_topcenter{text-align:center;overflow:hidden;width:226px;height:177px;margin:10px auto 5px auto;border:3px solid gray;}div.adv_topright{float:right;width:225px;height:177px;margin:10px 10px 5px 5px;border:3px solid gray;}div.adv_nextleft{float:left;width:224px;height:177px;margin:5px 5px 5px 10px;border:3px solid gray;}div.adv_nextcenter{text-align:center;overflow:hidden;width:226px;height:177px;margin:10px auto 5px auto;border:3px solid gray;}div.adv_nextright{float:right;width:225px;height:177px;margin:5px 10px 5px 5px;border:3px solid gray;}</style></head><body><div class="ex"><div class="adv_topright"></div><div class="adv_topleft"></div><div class="adv_topcenter"></div><div class="adv_nextright"></div><div class="adv_nextleft"></div><div class="adv_nextcenter"></div></div><div class="ex2"></div</body></html>

Link to comment
Share on other sites

As for the collapsing margins, that's very descriptive of my problem. The CSS reference said horizontal margins never collapse, but they seem to be. Please confirm this observation.
Indeed. It seems that (as unlikely as it sounds) all the major browsers are incorrectly implementing this behavior.
Link to comment
Share on other sites

I sure am glad you commented on this ShadowMage. Like Deirdre's Dad once told me, "scripting's not for cowards".Thanks Again,Niche

Edited by niche
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...