/    Sign up×
Community /Pin to ProfileBookmark

Padding, margin, what is going on?

Copy linkTweet thisAlerts:
Oct 04.2011

Hi all,

I am having a problem and confused about what is going on with my DIV’s. I have 3 DIV’s that are supposed to stick together to create a white box (not separated). The middle div and the bottom div work fine, but the top div just won’t stick on the top of the middle div. I have tried to set the padding and margin to 0px and still no luck.

The weird thing is, if I enable the borders, they would stick together. But after I disable the borders again, they separate again..

How do you guys do it?

Regards,
Dhimoet

Note: I have uploaded a screenshot if you guys don’t understand my poor English ?

Oh, and here is the code:

[code=php]
#content-box-top {
margin-left: auto;
margin-right: auto;
margin-top: 100px;
width: 800px;
height: 80px;
background-image: url(‘images/content-box-top.png’);
background-repeat: no-repeat;
}

#content-box-bottom {
margin-left: auto;
margin-right: auto;
width: 800px;
height: 80px;
background-image: url(‘images/content-box-bottom.png’);
background-repeat: no-repeat;
}

#content-wrapper {
margin-left: auto;
margin-right: auto;
width: 800px;
background-color: #FFFFFF;
min-height: 400px;
}
[/code]

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@dhimoetauthorOct 05.2011 — I just opened it up with Safari on my mac, and saw that the middle part and the bottom part are also separated.. Anyone knows why? ?
Copy linkTweet thisAlerts:
@rtretheweyOct 05.2011 — Try:
<i>
</i>#content-wrapper p { margin-top:0; }
Copy linkTweet thisAlerts:
@dalecospOct 05.2011 — Exactly, a wrapper/container in the HTML might be what's needed.

Also be aware that some designs are making use of "border-radius", a next-gen CSS selector which is of yet unsupported in MSIE. In which case, you'd be seeing one div, not 4 ....
Copy linkTweet thisAlerts:
@dhimoetauthorOct 05.2011 — Hi rtrethewey,

I have added the following code and they don't help at all:
[code=php]
div {
padding: 0px;
margin: 0px;
}

p {
padding: 0px;
margin: 0px;
}
[/code]

Hi dalecosp,

When you say MSIE, do you mean Internet Explorer? I use Firefox for daily basis. I only use IE at work for final testing (because for personal work, I don't care how it looks on IE, whereas in a company I will get a problem if I don't care about the customers). ?

So, do you have any specific solutions?

Thank you all,

Dhimoet
Copy linkTweet thisAlerts:
@dhimoetauthorOct 05.2011 — Sorry guys,

Actually, the solution from rtrethewey works

I thought it didn't work because I believed that the cache (or cookies?) would reload after I hit refresh button a few times. After I returned back to the page, I noticed that now all the 3 parts stick together.

Regards,

Dhimoet

[B][COLOR="Red"]Correction:[/COLOR][/B]

Something weird is happening.. Actually it works only when I am not logged in. But when I am logged in, they are separated again.. ?

[CODE]http://www.dhimoet.com/dev/content.php?cid=100[/CODE]

[B][COLOR="Red"]Correction:[/COLOR][/B]

So, I finally fixed it. I remember I didn't use p.. but I used h1. So, I tried to set both the margin and padding for h1, and it worked! ?
Copy linkTweet thisAlerts:
@dalecospOct 05.2011 — Hi dalecosp,

When you say MSIE, do you mean Internet Explorer? I use Firefox for daily basis. I only use IE at work for final testing (because for personal work, I don't care how it looks on IE, whereas in a company I will get a problem if I don't care about the customers). ?

So, do you have any specific solutions?

Thank you all,

Dhimoet[/QUOTE]

Yes, MSIE=Internet Exploder ?

Using "border-radius" you can make one element instead of three. Something like this (but I'd Google to make sure I got it exactly right):
&lt;div style="background:blue;color:white;border:1px solid red;border-radius:15px;-moz-border-radius:15px;width:300px;height:300px;"&gt;Foo&lt;/div&gt;
Copy linkTweet thisAlerts:
@dhimoetauthorOct 05.2011 — Hi dalecosp,

Thank you for the input. I will definitely keep in mind what you have explained here.

Dhimoet
×

Success!

Help @dhimoet 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 6.2,
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: @meenaratha,
tipped: article
amount: 1000 SATS,

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

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...