Multiple CSS Classes for positioning?

[Tonearm]

I found this that describes multiple CSS class:

[webmasterworld.com...]

Would the same work for positioning? This works to slide the content down the right amount:

<div class="spacer_1">
<div class="spacer_2">
<div class="header_1">content</div>
</div>
</div>

But this doesn't:

<div class="spacer_1 spacer_2">
<div class="header_1">content</div>
</div>

Here's the CSS:

div.spacer_1 {font-family:verdana; font-size:small; top:1em; position:relative}

div.spacer_2 {font-family:verdana; font-size:x-small; top:1em; position:relative}

[mipapage]

The difference here is that in the first case you are stacking two 1em blocks on top of another, resulting in 2em's of space...

...while in the 2nd you are simply setting the value for 'top' of the outside div to '1em', twice, so to speak. In effect saying "set the top 1em down - set the top 1em down", not "set top 1em down and another 1ems down.."

Did that make sense? In the first you are piling two spaces in top of each other, while in the second you are (twice) setting a space of 1em on the div.

There has to be a better way to explain this!

[SuzyUK]

hi mipapage, long time no see..

>>better way = not sure
but it's the cascade at work

<div class="spacer_1 spacer_2">

spacer_2's properties are overruling spacer_1's because spacer_2 classname is the same specificity but is listed later, and so it "wins" by order of the cascade. Multiple classes don't accumulate the same properties, the later one simply overwites the earlier ones..

The only thing according to your CSS that specifying the double class is doing for the div in this case is changing it's font-size

If you want to use mutiple classes for this you could do it like this:

<div class="spacer_1 top_2">
<div class="header_1">content</div>
</div>

div.spacer_1 {font-family:verdana; font-size:small; top:1em; position:relative}

div.top_2 {top:2em;}

so spacer_1 is providing the standard details, but top_2 is being used to override only one property the rest will remain as per spacer_1's rules.

Suzy

[Tonearm]

Thank you for the explanation. That makes sense now.

What I'd like to be able to do is specify a top that combines an em spacing and a px spacing. I can do that with embedded divs, each with a different top setting, but is there a way to do it with one div?

[SuzyUK]

>>but is there a way to do it with one div

maybe by using EM padding and a pixel margin on the header div itself? but without knowing some more, collapsing margins could affect that theory ;)

Suzy

[Tonearm]

That sounds pretty good to me. How would the CSS look?

[SuzyUK]

I don't know what's in header_1, which will possibly affect this but for example..

.header_1 {
padding: 2em 0 0 0; /* top only set but could apply to bottom too */
margin: 10px 0 0 0; /* top only set but could apply to bottom too */
background: #fcf;
}

<div class="header_1"><h3>content</h3></div>
<div class="header_1">content</div>
<div class="header_1">content</div>

You'll see the "padding" on the first div is more than expected that's due to the default margin on the h3 not collapsing.. but you can control/zero the default margins as required.

Suzy

[Tonearm]

Ok, I see what you mean. Would this work with absolute positioning?

[SuzyUK]

well the em padding would, and if you're using Absolute Postioning then you could just use your top co-ordinate in pixels to do that bit..

.header_1 {
padding: 2em 0 0 0; /* top only this could now be either padding or margin */
background: #fcf;
position: absolute;
top: 50px; /* the pixel "spacer" */
}

Suzy

[Tonearm]

Works like a charm, thanks a lot Suzie. I like that shorthand padding specification style. How does it work across browsers?

[mipapage]

Hi SuzyUK!

How does it work across browsers?

Great. Works for padding, borders and margins... Goes clockwise from the top...