When do you use padding in your DIV's to get the content inside it away from the edge? Or do you just use "left: 20px;" ?

<div id="container">

<div id="left_column"></div>

<div id="right_column"></div>

<div id="footer_clears_all"></div>

</div>

I have something like this above, with following css:

div#container {
  width: 500px;
}

div#left_column {
  position: relative; float: left;
  width: 250px;
}

div#right_column {
  position: relative; float: right;
  width: 250px;
}

div#footer_clears_all {
  clear: both;
}

The problem is, when you want to do a "padding-left: 20px;" in the left_column DIV, it's not working properly in most browsers.
Or the backgrounds are moving to the right, or it's pushing the right_column DIV out of the container, etc...

Is the padding only for text? Like padding only the text of the div:

#left_column p h1 h2 h3 {
padding-left: 20px;
}

Or do I have to use just:

#left_column p h1 h2 h3 {
left: 20px;
}

What's the difference between the "padding-left" and the normal "left".

You have to reduce width of those containers when you use right or left padding.
div#left_column {
position: relative; float: left;
width: 230px;
padding:0 0 0 20px;
}

div#right_column {
position: relative; float: right;
width: 230px;
padding:0 0 0 20px;
}

Hmm, I see. That's a possibility.

But... isn't it so that your DIVs need to stay the way they are, without padding to the DIV. And instead you add padding to the things inside the div, like an img or a paragraph,... ?

Like here in this tutorial:
http://css.maxdesign.com.au/floatuto...torial0406.htm

well I think if all elements in that container have padding left the same, why define it for all elements inside and not only for that container? It all depends from case to case what is better

Mmyeah.. indeed.

And what about the other "left: 20px;" attributes.

Like here at W3schools, they don't do it with padding but like this :
http://www.w3schools.com/css/tryit.a...ition_relative

I don't understand what the difference is, and why there is a difference and for what you have to use these 2.

http://www.w3schools.com/css/tryit.a...trycss_padding

I personally use padding a lot more then positioning left, right, top, and bottom.
As I said before, if all element are aligned in that container, use padding, If you want it different values for that element, use positioning especially if you want to use negative values like left:-20px, because it is not standard for padding...

padding is for when you need the content of the element to be away from the element inner edge or border.

to move elements away from each other you should be using margins.

Positioning. left | right | top | bottom is for moving the element in a direction relative to it's predecessor

margins set the distance from the outer edge of the element to the outer edge of the surrounding elements. Or in the case of margins on a child element, it will be the distance between the inner edge (plus padding) of the parent element

padding sets the distance from the inner edge of an element to the outer edge (plus margins) of any child elements.

Still, the problem stays !

Well, feel free to test it.
I added margins to put the columns neat away from each other.
I put some dashed borders around it so you can see it all clearly.

If you add the padding inside the div, so your content goes away from your border or inner edge, the columns go out of the container grid or will be set underneath each other instead of next to each other.

Take this beautiful grid I made:

body {
  margin-top: 20px; margin-bottom: 40px;
  background-color: #000000;
  text-align: center;
  font-family: Arial; color: #CCCCCC; font-size: 3mm; 
}
 
div#container {
  width: 800px;
  margin: 0 auto;
  text-align: center;
  border: 1px dashed #CCCCCC;
}
 
div#header  {
  height: 170px; width: 760px;
  margin-top: 20px;
}
 
div#left_column {
  width: 370px; height: 300px;
  border: 1px dashed #CCCCCC;
  position: relative; float: left;
  margin-left: 20px; 
  display: inline;   /* fixes the IE bug for margins */
padding: 20px;
}
 
div#right_column {
  width: 370px;  height: 500px;
  border: 1px dashed #CCCCCC;
  position: relative; float: left;
  margin-left: 20px; 
padding: 20px;
}
 
div#footer_clears_all {
  clear: both;
  width: 760px;  height: 100px;
  margin: 20px 20px 20px 20px;
  border: 1px dashed #CCCCCC;
}

With this container:

<div id="container">
<div id="header">some text</div>
<div id="left_column">some text</div>
<div id="right_column">some text for example: Lorem Ipsum...</div>
<div id="footer_clears_all">imagine some possible text!</div>
</div>

The problem with this padding: it moves your columns away, your background image will be positioned out of the box, etc...

When you only put your padding to the content inside it, it works:

#left_column p h1 h2 ... { padding: 20px; }


The question is: why...
And also: why there is a possibility to position with only "left: 20px;" instead of "padding-left: 20px;".

You do realise that padding:20px; equates to
padding-top:20px;
padding-bottom:20px;
padding-left:20px;
padding-right:20px;

don't you?

YOU DO NOT position elements using padding, that is NOT it's purpose!!

post a link to the page and we'll will tell you where you are going astray.

Your container have width 800px and your left and rigt column together have 370px + 370px + both of them have padding left and right 20px=40px more for each layer +plus borders left and right, that is 4px so its:
370px+370px+40px+40px+4px=8204px, that is more than 800px

Chris said to you what padding:20px; means. I told you that you have to reduce widths of containers when you want to give them left or right padding and height for top or bottom padding this is also for border too. So if i would like to keep those widths and heights you posted I would do it this way:

div#left_column {
width: 338px; height: 258px;
border: 1px dashed #CCCCCC;
position: relative; float: left;
margin-left: 20px;
display: inline; /* fixes the IE bug for margins */
padding: 20px;
}

div#right_column {
width: 338px; height: 458px;
border: 1px dashed #CCCCCC;
position: relative; float: left;
margin-left: 20px;
padding: 20px;
}

What I did here is to reduce height by 20px(padding-top)+20px(padding-bottom)+1px(border-top)+1px(border-bottom)=42px reducing height for both inner layers.

Regarding widths, I reduced it with same logic but I had to reduce it more for 20px because of those left margins..

Originally Posted by djura

So if i would like to keep those widths and heights you posted I would do it this way:

div#left_column {
width: 338px; height: 258px;
border: 1px dashed #CCCCCC;
position: relative; float: left;
margin-left: 20px;
display: inline; /* fixes the IE bug for margins */
padding: 20px;
}

div#right_column {
width: 338px; height: 458px;
border: 1px dashed #CCCCCC;
position: relative; float: left;
margin-left: 20px;
padding: 20px;
}

Originally Posted by chrishirst

post a link to the page and we'll will tell you where you are going astray.

Ok, on djura's way, I get this result:
http://www.bulevardi.be/cedric/djura.php
In IE 6.0, I get following result: the right column is pushed against the edge of the container on the right.
I don't know how it looks in FF, maybe it looks better there, but I ran out of browsers on the computer from where I'm working right now.

If I do it my own way, the right column stays neat with a neat gap between the container.
I added the following to get the content inside the columns padding away from its border:
p {
padding: 20px;
}
http://www.bulevardi.be/cedric/index.php

What I also think that's strange (for both examples): the padding doesn't look like 20px, but it even looks doubled.

Now when we have a link it is easier to go on.
Here is my solution now. You will notice that I have reduced width of the right container so it wont be pushed to the right border of #container. Also i have aligned text to the left for both containers so it will not look like it have padding greater than 20px. Now it looks the same in FF IE6 and IE7

div#content_left{
width: 338px; height: 258px;
border: 1px dashed #CCCCCC;
position: relative; float: left;
margin-left: 20px;
display: inline; /* fixes the IE bug for margins */
padding: 20px;
text-align:left;
}

div#content_right {
width: 318px; height: 458px;
border: 1px dashed #CCCCCC;
position: relative; float: left;
margin-left: 20px;
padding: 20px;
text-align:left;
}

> it works !
I edited the code http://www.bulevardi.be/cedric/djura.php

Thanks

But still, it's a lot easier when you don't have to do all the calculations of paddings, margins, width,...
Isn't it easier by just let the columns to be like they need to be and add just some paddings to the elements of the divs?

Edit: perhaps I just missed something about "the box model".
I didn't know that the padding inside a DIV-border counts extra to the width of the DIV. I thought that everything inside the DIV-border (like padding), was included in the width of the DIV.
So that's what I learned.
Thank you guys.

Still, for some older browsers it's not working:
http://browsershots.org/screenshots/...0dd354ee7aeeb/

That's the famous box model bug in IE.
Probably I was totally thinking in that way, because the old IE method is such more logical than the box model there is from W3C. The old IE model takes the width till the border, which is quit logical.
http://en.wikipedia.org/wiki/Interne..._box_model_bug

That's the famous box model bug in IE.

I don't know why you'd even lose any sleep over such an OLD version of IE - my stats don't show a single visitor using anything below IE 6.

Originally Posted by LadynRed

I don't know why you'd even lose any sleep over such an OLD version of IE - my stats don't show a single visitor using anything below IE 6.

This is so true, I haven't seen more than 2 hits on my sites stats with IE below version 6, even IE6 is now at 15% and IE7 at 25%....so like LadynRed said, don't bother with it

-deleted-

I made a new topic for another problem (footer).

when you use padding you have to move the x.y. to place a picture.

allways think of the width per sample
700 by -10 on left padding is 690

if that doesn't work in IE , allways use relative rule.

regards

-deleted-

great! but I wanna ask what is the use of padding? I'm a newbie I know its a silly question but I wanna know, I want to learn this.