css positioning questions

[k2k]

i just read a couple of threads regarding css positioning and i have found something some where a while ago. however, i couldn't find any good explanation of it. would anyone please explain a bit of some of these code? thanks

1. clear:both?
2. margin: 0; padding: 0 // when it is just margin without left or right, how does it work? is padding here just like the table padding?

3. margin-left: auto; margin-right: auto; padding: 0 // why would setting margin-left and margin-right both auto make the whole thing center?

if someone would explain more about how margin work it would be great. i never had any good explanation about css positioning.

thanks thanks

.cenx{text-align: center}
.ceni{clear:both}
.bxfix{margin:0; border:none; padding: 0;}

.cenx{text-align: center}
.ceni{clear: both}
.bxcen{margin-left: auto; margin-right: auto; border: none; padding:0}

[kanaku]

I was going to be a pompous ass and point you to the W3C site... but it's written in Martian so I'll try to humanize it here. =)

clear: both

If you have a couple of floated elements, say div1, div2, and div3, their arrangement will depend on how much content each div has.
For example, if all divs have a simple "Hello world" in them, most likely, the divs will lie horizontally beside each other on a page. Adding a clear attribute to them specifies that a certain side of that floated div shouldn't have certain floated elements beside it:

#div1, #div2, #div3 {display: block; float: left;}
#div2 {clear: left;}

Instead of the divs lying horizontally, div2 and div3 will now lie in a row below div1. This is because you specified that div2's left side shouldn't have left floated elements beside it.

(In truth, the clear: right declaration stumps me. So you need to have someone else explain that)

Specifying clear: both is like saying: I don't want floated elements on BOTH sides of this element. So divs 1, 2, & 3 will lie on different rows altogether.

when it is just margin without left or right

The margin property is a shorthand for the top, right, bottom, left margin properties. It can take a maximum of four values:

margin: 1.0em 2.0em 3.0em 4.0em;

Is like saying:

margin-top: 1.0em;
margin-right: 2.0em;
margin-bottom: 3.0em;
margin-left: 4.0em;

... but it's shorter. =) The order is important. If you have four values, they are specifying the margins in this order: top-right-bottom-left. It's like a clock starting at 12 and moving clockwise.

I did say it was a maximum of four values... you can actually specify just 1 value. In which case you're saying that all sides are to have that margin:

margin: 0;

... which you will often see is a quick and simple way of saying: I want NO margin on ALL sides. It's not limited to setting margins to 0. You can also use it for other values like margin: 2.0em which is like saying all margins are 2.0em.

If you use two values for the margin: margin: 1.0em 5.0em it's equivalent to saying: top and bottom margins are 1.0em --- left and right margins are 5.0em

The three value margin ie margin: 0 1.0em 2.0em specifies that:
top-margin is 0
right-margin is 1.0em
bottom-margin is 2.0em
left-margin is 1.0em

This also works for padding vs padding-top, padding-right, etc.

why would setting margin-left and margin-right both auto make the whole thing center

Ah... the centering trick. =)
It's more known in this form margin: 0 auto which, from the discussion, translates to:
0 margin for top and bottom*
'auto' margin for left and right

*you can totally change this too; it's the left and right values set to auto that's important

Why does that center the element?
Say you have an 800px containing block and an element 400px wide. You have 400px of space between your containing block's edges and the 400px-element. Specifying a value of "auto" for left and right margins is like telling them to be good kids and split up the extra-space between themselves. This will give a (400/2=) 200px margin on BOTH sides (left and right) of your element.

This will work even if you don't know the original width of your containing block since the value of "auto" will just split the remaining space between the left and right sides of your element. (If the container is 1000px, the effective margins will be 600/2 = 300px on each side)

is padding here just like the table padding

Hmm.. I'm not sure what you meant by that but padding SHOULD BE (*hint IE) the "cushion" between your container's boundaries and the content themselves. Whereas margin is the "space" between the boundary of your element and that of another's.

I guess the cellpadding definition kind of fits, except that the padding property is not limited to table cells.

[k2k]

thanks kanaku, that cleared up many of my confusions.

very good explanation. = )

[kanaku]

You're most welcome. =)

(I'm still hoping someone will clear up the issue with clear: right though)

[MidiMagic]

You're most welcome. =)

(I'm still hoping someone will clear up the issue with clear: right though)

Doesn't this allow other items (such as text) to flow on the left side?

[kanaku]

Doesn't this allow other items (such as text) to flow on the left side?

Thank you for the reply. =)

Yes, it doesn't "clear" the left side, allowing elements to float beside it. But it doesn't always clear the right side either. =(

So I'm wondering what it's for, since it doesn't clear the right side the same way clear: left works for the left.