Stylesheets - Mixing relative and absolute... go boom...

Author

Mixing relative and absolute... go boom...

Quiet Desperation

2003-12-27, 1:29 pm

I started with this:

#section
{
position: relative;
width: 100%;
}

and

<div id="section">
Section 1
</div>
<div id="section">
Section 2
</div>
<div id="section">
Section 3
</div>

This worked as expected. I got:

Section 1
Section 2
Section 3

To the CSS I added:

#column21
{
position: absolute;
width: 20%;
}

#column22
{
position: absolute;
margin-left: 20%;
width: 30%;
}

#column23
{
position: absolute;
margin-left: 50%;
width: 50%;
}

And changed the HTML to

<div id="section">
Section 1
</div>
<div id="section">
<div id="column21">
Column21
</div>
<div id="column22">
Column22
</div>
<div id="column23">
Column23
</div>
</div>
<div id="section">
Section 3
</div>

The columns themselves worked great, but "Section 3" is now written
*over* the new 3-column section 2, right after Section 1.

I expected:
Section 1
Column21 Column22 Column23
Section3

I got:
Section 1
######### Column22 Column23

where "#########" is "Column21" and "Section 3" written on top on one
another.

It appears that Section 1 renders normally, the new section 2 is placed
properly relative, the absolute columns are placed properly, but when
it comes time to place section 3, the new section to is somehow negated
from the flow, and section 3 is place right after section 1 as if the
new section 2 were never there.

This result is really counterintuitive to me. It does the same thing in
IE5 and Safari on Mac OS X and IE6 on WinXP, so I have to believe I'm
missing something in the CSS spec. Either that or I can chalk it up as
another expected result of standards designed by a committee. ;-)

David Dorward

2003-12-27, 2:28 pm

Quiet Desperation wrote:

quote:

> I started with this:

quote:

> <div id="section">
> Section 1
> </div>
> <div id="section">
> Section 2
> </div>
> <div id="section">
> Section 3
> </div>
> <div id="section">
> Section 1
> </div>
> <div id="section">

You have syntax errors. You can't have five "The one and only element in
this document called 'section'".

http://css-discuss.incutio.com/?page=ClassesVsIds
http://validator.w3.org/

quote:

> another expected result of standards designed by a committee.

I skimmed the rest of the message _very_ quickly, bit this caught my eye.

Don't blame the standard until you conform to it.

--
David Dorward <http://dorward.me.uk/>

Quiet Desperation

2003-12-27, 3:29 pm

In article <bskfud$g6j$2$830fa17d@news.demon.co.uk>, David Dorward
<dorward@yahoo.com> wrote:

quote:

> You have syntax errors. You can't have five "The one and only element in
> this document called 'section'".

I had three. Something might be getting narfed somewhere between my
newsreader and yours.

Actually, I did initially try three separate CSS id definitions
(section1, section2, section3) and got the same result. I posted this
one because it was shorter. In all my fiddling this morning I forgot
ids were one shots.

quote:

> I skimmed the rest of the message _very_ quickly, bit this caught my eye.

Oh c'mon. I put a smiley. I'm a big CSS booster, but I do feel some of
the web standards are a bit more obtuse than they really need to be.

Thanks for the link.

kchayka

2003-12-28, 9:28 am

Quiet Desperation wrote:

quote:

> I started with this:

Code snippets rarely tell the whole story. Please post a URL.

--
To email a reply, remove (dash)un(dash). Mail sent to the un
address is considered spam and automatically deleted.

Michael Rozdoba

2003-12-28, 10:28 am

Quiet Desperation wrote:

[snip code fragments]

quote:

> The columns themselves worked great, but "Section 3" is now written
> *over* the new 3-column section 2, right after Section 1.

Yup.

quote:

> I expected:
> Section 1
> Column21 Column22 Column23
> Section3

Why did you expect this?

quote:

> I got:
> Section 1
> ######### Column22 Column23
>
> where "#########" is "Column21" and "Section 3" written on top on one
> another.
>
> It appears that Section 1 renders normally, the new section 2 is placed
> properly relative, the absolute columns are placed properly, but when
> it comes time to place section 3, the new section to is somehow negated
> from the flow, and section 3 is place right after section 1 as if the
> new section 2 were never there.

Exactly.

quote:

> This result is really counterintuitive to me.

Why are you specifying position values other than static, but then not
actually bothering to specify any positions?

What are you trying to achieve?

quote:

> It does the same thing in IE5 and Safari on Mac OS X and IE6 on
> WinXP, so I have to believe I'm missing something in the CSS spec.
> Either that or I can chalk it up as another expected result of
> standards designed by a committee. ;-)

The former ;)

Try reading http://www.w3.org/TR/CSS2/visuren.h...itioning-scheme

Specifically the part which says "Absolutely positioned boxes are taken
out of the normal flow".

HTH.

--
Michael
m r o z a t u k g a t e w a y d o t n e t

Quiet Desperation

2003-12-28, 12:28 pm

In article <3feede77$0$25964$fa0fcedb@lovejoy.zen.co.uk>, Michael
Rozdoba <mroz@nowhere.invalid> wrote:

quote:

> Specifically the part which says "Absolutely positioned boxes are taken
> out of the normal flow".

I knew that, but I find it counterintuitive that absolute DIVs *inside*
a *relative* DIV remove the containing relative DIV from the flow. It
feels like the absoluteness of the child DIVs are cascading back upward
to the parent. The containing relative DIV should act like a little
pocket universe. To the top flow it's just another relative DIV. It
would be a lot better, IMHO, if it worked this way. There's several
CSS-P issues I have run into that would be easily solved by this
behavior.

Quiet Desperation

2003-12-28, 12:28 pm

In article <3feed27d$0$40218$39cecf19@news.twtelecom.net>, kchayka
<kcha-un-yka@sihope.com> wrote:

quote:

> Code snippets rarely tell the whole story. Please post a URL.

It's not online anywhere. It was just an experiment.