Proper Use of Padding and Margins in CSS

{ Posted on Aug 09 2009 by Ryan Montilla }

Tags : IE Browse Issue, IE Browser Problem, IE Padding Issue, Padding tutorials
Categories : New and Events

Being a web designer, most of our problems when it comes to browser issue is Internet Explorer. 30% users are still using Internet Explorer 6.0 so we still need to test our web design in IE 6.0

But how we can create a CSS code that will solve the IE browser Issue? Our design are perfect in most browser but when it comes to IE, it sucks! And we need to debug it. I don’t used a hack in IE for my design so my layout is proper in IE browser. I just want to challenge IE for this issue especially in padding.

There is a proper way of using between padding and margins, however sometimes if you used margins you got a browser issue in IE. So I will advised you to use padding for alignment so IE can’t suck you.

How to center align a 800px width in IE Browser

Using the below code, your web alignment of 800px will be align properly in IE, Firefox,Safari, and Opera.Using an (auto) command, your layout will display properly in all browsers especially IE.

Your CSS

.center_align{
width: 800px;
margins: 0px auto 0px auto;
border:solid 1px #000;
}
.content{
width:600px;
margins: 0px auto 0px auto;
border:solid 1px #000;
}

Your HTML

<html>
<title>Your Title Here</title>
<head></head>
<body><div class=”center_align”><div class=”content”>Sample content</div></div>
</body>
</html>

How to used padding in IE browser Issue
This sample code will align your design properly if you are using a (padding) command. Proper using of padding can avoid any browser issue in most browser especially in IE.

Your Original CSS

.leftside{
width:300px;
padding-left:10px;
padding-right:15px;
}

Your Final CSS

You will noticed that the above (Original CSS) is different from the (Final CSS). I will explain it to you why is that happen.

We have width of 300px and we used a padding-left:10px and padding-right:15px. But since we are using padding left and right, the 300px becomes 275px. And ones we add the 275+10+15, the width is still 300px. Try to apply this in your site so you can see if it is working.

Why? Because we used the padding left and right. Using padding is increasing the with, that is why we decrease the orignal with of 300px to 275px.

This is the (Secret of CSS) so your layout is not sucks in Internet Explorer browser and compatible in all browser.

I hope you understand what I meant. If you have questions, I am happy to assist you.

.leftside{
width:275px;
padding-left:10px;
padding-right:15px;
}

Your HTML

<html>
<title> Your Title Here </title>
<head></head>
<body><div class=”leftside”></div>
</body>
</html>

Possibly Related Posts:

Share and Enjoy:

If you enjoyed this post, make sure you subscribe to my RSS feed!

This entry was posted on Sunday, August 9th, 2009 at 10:33 am and is filed under New and Events. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

10 Responses to “Proper Use of Padding and Margins in CSS”

By zplits | what's the latest? whatsthelatest.net on Aug 18, 2009 | Reply

Hi there sir, good day!,

Thanks for sharing this, i hope this will fix my problem in the very annoying browser (IE 6). lol.