By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,723 Members | 1,655 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,723 IT Pros & Developers. It's quick & easy.

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

P: n/a
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. ;-)
Jul 20 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
Quiet Desperation wrote:
I started with this: <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/
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/>
Jul 20 '05 #2

P: n/a
In article <bs*******************@news.demon.co.uk>, David Dorward
<do*****@yahoo.com> wrote:
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.
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.
Jul 20 '05 #3

P: n/a
Quiet Desperation wrote:
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.
Jul 20 '05 #4

P: n/a
Quiet Desperation wrote:

[snip code fragments]
The columns themselves worked great, but "Section 3" is now written
*over* the new 3-column section 2, right after Section 1.
Yup.
I expected:
Section 1
Column21 Column22 Column23
Section3
Why did you expect this?
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.
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?
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.ht...tioning-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
Jul 20 '05 #5

P: n/a
In article <3f***********************@lovejoy.zen.co.uk>, Michael
Rozdoba <mr**@nowhere.invalid> wrote:
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.
Jul 20 '05 #6

P: n/a
In article <3f***********************@news.twtelecom.net>, kchayka
<kc*********@sihope.com> wrote:
Code snippets rarely tell the whole story. Please post a URL.


It's not online anywhere. It was just an experiment.
Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.