/    Sign up×
Community /Pin to ProfileBookmark

Margin-top pushing down containing divs..?

Copy linkTweet thisAlerts:
Apr 05.2010

Hi All,
I have 3 divs. A main or wrap div, that needs to be flush with the top of the browser. It contains a 2nd div which contains a 3rd div. The 3rd has a margin-top property. set to 20px, but it brings the other 2 divs down 20px.

I just don’t understand!, i’m merely trying to move the 3rd down 20 pixels. This seems to be behaving in the reverse of inheritance.

Can someone please look this over, the code is very simple. I have it on staging.

[url]http://www.tomcarden.net/staging/margin-top_troubleshoot.html[/url]

thank you

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@entropiiiApr 05.2010 — Got your divs stacked wrong... try this:

<div id="wrapper">

This is the main wrap or containing div. It should be touching to top of the browser window.

<div id="topdiv">

this is the 2nd div

<div id="picgrid">

This is the 3rd div. <br/>It is the child of the 2nd div which is the the child of the main contain div.<br/>It's margin-top property set to 20px. <br/>It is pushing both the containing divs (the parent divs) down 20px with it!?<br/>This seems to be the reverse of inheritance.

</div>

</div>

</div>
Copy linkTweet thisAlerts:
@apegApr 08.2010 — I have seen this problem b4, more commonly with <p>. I have never Indepthly looked into it, but i can give you a starting ground.

if you put "padding-top:1px" on your #topdiv div and you will see the problem is fixed.

if you have a page with a few <p></p>....<p></p> you will see the same thing happening to the margins, in fact they will overlap.

-aPeg
×

Success!

Help @toptomato spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.8,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...