One Last Question (For Now)

[Alan Little]

According to the CSS guide at http://www.westciv.com/, absolute positioning
"...lets a developer say where the top left hand corner of an element
should be located with respect to its parent element."

If that's so, it seems like this layout should work:

http://development2.holotech.net/absolute.html

Columns 2 and 3 are in a wrapper with columns 1 and 4 floated alongside it.
They should be positioned relative to that wrapper, but they are positioned
relative to the page. Why is that?

--
Alan Little
Phorm PHP Form Processor
http://www.phorm.com/

[Eric Bohlman]

Alan Little <al**@n-o-s-p-a-m-phorm.com> wrote in
news:Xn**************************@216.196.97.132:

According to the CSS guide at http://www.westciv.com/, absolute
positioning "...lets a developer say where the top left hand corner of
an element should be located with respect to its parent element."

If that's so, it seems like this layout should work:

http://development2.holotech.net/absolute.html

Columns 2 and 3 are in a wrapper with columns 1 and 4 floated
alongside it. They should be positioned relative to that wrapper, but
they are positioned relative to the page. Why is that?

Because "with respect to its parent element" isn't quite right. It really
should be "with respect to its closest non-statically positioned ancestor
element, or the entire viewport if there isn't a positioned ancestor
element."

Just set "position: relative" (without specifying any offsets) for the
wrapper. That will make it the "containing block" for your columns.

[Alan Little]

Carved in mystic runes upon the very living rock, the last words of Eric
Bohlman of comp.infosystems.www.authoring.stylesheets make plain:

Alan Little <al**@n-o-s-p-a-m-phorm.com> wrote in
news:Xn**************************@216.196.97.132:

According to the CSS guide at http://www.westciv.com/, absolute
positioning "...lets a developer say where the top left hand corner
of an element should be located with respect to its parent element."

If that's so, it seems like this layout should work:

http://development2.holotech.net/absolute.html

Columns 2 and 3 are in a wrapper with columns 1 and 4 floated
alongside it. They should be positioned relative to that wrapper,
but they are positioned relative to the page. Why is that?

Because "with respect to its parent element" isn't quite right. It
really should be "with respect to its closest non-statically
positioned ancestor element, or the entire viewport if there isn't a
positioned ancestor element."

Just set "position: relative" (without specifying any offsets) for the
wrapper. That will make it the "containing block" for your columns.

That's good to know. Unfortunately, while Opera and IE agree with you, NS
steadfastly and gleefully insists you're full of it.

I'm debating the wisdom of really expanding into design. When I write a
line of PHP code, I don't have to worry or wonder about anyone's
opinions, bright ideas, implementation, blah blah blah. If I write it
properly, it does what it's supposed to. Actually, there are a few cross-
platform issues to consider if I need my code to be portable (which is
not usually the case), but it's nothing like this mish-mash of esoterica.

--
Alan Little
Phorm PHP Form Processor
http://www.phorm.com/

[Alan Little]

Carved in mystic runes upon the very living rock, the last words of Alan
Little of comp.infosystems.www.authoring.stylesheets make plain:

Carved in mystic runes upon the very living rock, the last words of
Eric Bohlman of comp.infosystems.www.authoring.stylesheets make plain:

Alan Little <al**@n-o-s-p-a-m-phorm.com> wrote in
news:Xn**************************@216.196.97.132:

According to the CSS guide at http://www.westciv.com/, absolute
positioning "...lets a developer say where the top left hand corner
of an element should be located with respect to its parent element."

If that's so, it seems like this layout should work:

http://development2.holotech.net/absolute.html

Columns 2 and 3 are in a wrapper with columns 1 and 4 floated
alongside it. They should be positioned relative to that wrapper,
but they are positioned relative to the page. Why is that?

Because "with respect to its parent element" isn't quite right. It
really should be "with respect to its closest non-statically
positioned ancestor element, or the entire viewport if there isn't a
positioned ancestor element."

Just set "position: relative" (without specifying any offsets) for
the wrapper. That will make it the "containing block" for your
columns.

That's good to know. Unfortunately, while Opera and IE agree with you,
NS steadfastly and gleefully insists you're full of it.

But wait!

And it came to pass that as Alan of Holotech didst languish in the Slough
of CSS Despond, a voice as of an angel didst speak unto him, saying,
"Thus sayeth Eric of Bohlman, that if thou might make thine wrapper non-
static, thine child elements shall thus conform to the positioning
thereof. Verily, he speaketh sooth. But NS in its iniquity spiteth thee,
saying, 'Forsooth, what then shall be the position of the wrapper? I wist
not what sayeth IE, nor even Opera; verily thou must shew it to me.'"
Then didst the light of truth shine forth and the voice as of the angel
didst proclaim, "Surely, thine wrapper must have an position!
Absolutely!" Thus did ALAN know that here was salvation from the
obstinance of NS:

http://development2.holotech.net/absabs.html

--
Alan Little
Phorm PHP Form Processor
http://www.phorm.com/

[Alan Little]

Carved in mystic runes upon the very living rock, the last words of Alan
Little of comp.infosystems.www.authoring.stylesheets make plain:

http://development2.holotech.net/absabs.html

Gahhhh! But then the footer doesn't float! ::sigh:: Screw it.

--
Alan Little
Phorm PHP Form Processor
http://www.phorm.com/

[kchayka]

Alan Little wrote:

http://development2.holotech.net/absabs.html

Gahhhh! But then the footer doesn't float! ::sigh:: Screw it.

The footer doesn't "float" like you expect because columns 2 and 3 are
absolutely positioned, so they have no effect on the footer placement.
I don't know whay you have the columns ordered the way you do in the
HTML, but if you float all 4 columns, clear:both will place the footer
below the longest column. Something like:

..col { width:25%; float:left; }
#footer { clear:both; }

with

<div id="header">header</div>
<div class="col">one</div>
<div class="col">two</div>
<div class="col">three</div>
<div class="col">four</div>
<div id="footer">footer</div>

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