Positioning

Is absolute positioning out of the dark ages yet?

[lat8cr]

I have recently started learning XHTML combined with CSS. In my research I have found statements like "Tables are Dead" and "This editor is no longer being offered because absolute positioning is not widely supported by many brwosers"

Has the use of table "truely" be replaced by absolute positioning or are they preferred when positioning of written data is essential?

There are too many antiquated websites out there giving advise on programming techniques to sort things out.

Don

[benihana]

absolute positioning is definately a viable technique. Most of my layouts use combinations of floats, and relative and absolute positioning.

If you have tabular data to display, then tables are the way to do it.

[Fotiman]

Personally, I try to avoid absolute positioning. But lately, I've been doing a lot more with floats to get layouts similar to what a table based layout could give you. I avoid using tables for layout now that I know how. :)

[DrDoc]

Absolute positioning is very well supported in any browser likely to be used by your visitors. That's not to say that all types of absolute positioning work flawlessly. But, if all you are after is simple positioning with only left/top (substitute for right or bottom, just don't use both left/right or top/bottom) you should be safe. Multiple nested absolutely positioned elements can also be quirky at times.

But, for all intents and purposes -- regular absolute positioning is safe to use. Most problems you would run into can either be avoided or worked around.

Floats are, IMO, quirkier in IE than AP is.

[Fotiman]

Floats are quirkier, particularly with IE. However, I find them to be more accessible than absolute positioning, and as long as you are careful not to trigger any of IE's float bugs, you can generally get a much more accessible page using floats.

Absolute positioning requires knowing exactly where on a page you want your content. However, this does not take into consideration differences in font sizes, so someone viewing your page with a really large font size might have overlapping blocks.

Hence, why I try to avoid AP. :)

[DrDoc]

Technically that's a concern with floats as well, since they require an explicit width.

[SuzyUK]

Welcome to the Forums lat8cr!

Absolute Positioning (AP) is most certainly viable technique, however it is in general misused by beginners in CSS due in part to tools like certain WYSIWYG editors which
a) call absolutely positioned divs, layers
b) use absolute positioning to build the entire site, therefore making it easy for a beginner to "stick a new bit" into page no matter what the source code order is (which is OK until you introduce nested postioned divs, even accidentally).

There is nothing wrong with AP but it should be used like every other positioning technique, where and if the job requires it, and really anyone should still learn a wee bit about how it works before trusting any tool.

There is a major upside to using AP and that is creating "full height" columnar designs, with header and footer (the supposed holy grail?) ~ and the take up on this has been held up because IE has never supported using ALL four co-ordinates together in order to size AP divs, therfore that has been a major drawback to the implementation of AP to its full potential.

So AP has it's IE quirks as well as floats, it's just that people seem more comfortable and able to deal with the floats complete with their IE drawbacks, plus there are at least workarounds for most IE float quirks, whereas the only solution for the IE AP bugs involve using javascript to detect screen heights/widths.

Now in saying all that IE7 appears to have tried to get their implementation of AP correct, you can now use all four co-ordinates (yippee) BUT they have caused some other errors (booo), e.g. padding overflow and if AP divs are nested IE can't calculate the bottom co-ordinate very well.. so it's time to watch and wait it's a huge step forward and if they get it right before final release we could be about to see AP take over in the race for the easiest way to create a multi column layout with bottom footer :) Which will drag it out of the dark hehe...

There are too many antiquated websites out there giving advise on programming techniques to sort things out.

It's not their fault they/we still have to work with what we have just now.. but you've come to the right place ;)

Is absolute positioning out of the dark ages yet?

Nearly, hopefully ;)

Suzy

[edited by: SuzyUK at 9:28 am (utc) on Feb. 4, 2006]

[SuzyUK]

...since they require an explicit width.

not so much methinks these days Doc.. it's a "feature" now that floats without widths should exhibit the shrinkwrap behaviour, IE/Mac still has a problem if it's not there, but mostly it's fairly well supported (with the occasional IE workaround as usual)

btw your old favourite inline-block sorts IE/Mac ;)

Suzy

[Fotiman]

Technically that's a concern with floats as well, since they require an explicit width.

They do? Can you point me to a place in the specs that states this is the case? I can't find that rule anywhere.

EDIT:
The CSS 2.1 spec states:

10.3.5 Floating, non-replaced elements

[...]

If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.

So width is not required on floated items.

[lat8cr]

My Thanks to ALL.

Don J.

[DrDoc]

CSS 1

If 'auto' is set as the value for one of the seven properties {'margin-left', 'border-left', 'padding-left', 'width', 'padding-right', 'border-right', and 'margin-right'} in an element that is inline or floating, it will be treated as if it were set to zero.

CSS 2

If 'left', 'right', 'width', 'margin-left', or 'margin-right' are specified as 'auto', their computed value is '0'.

The change to employ shrink-wrap of floated elements is a recent change to CSS 2.1 since it went back to being a WD, methinks.

[kamprint]

Just joined, have searched and read many posts on this topic.. the collective wisdom here is awesome. I want to use CSS instead of tables to position image thumbnails and captions. The images are to be positioned horizontally, but should wrap to a second line if too wide for the browser. Some have recommended embedding image and text in div elements, of which one or more floats. Others have said the float attribute's cross-browser performance is a bit iffy. A related question is which doctype to declare to achieve table-like positioning effects reliably. Some say strict xhtml is best because it's the wave of the future, others say html4-loose or transitional is best so that older-browser quirk mode will not render pages any worse-looking than they would appear with no doctype declaration. Would it make sense to write new pages with the xhtml doctype, and transition existing pages with, well, transitional html? What I am looking for is a relatively easy to implement CSS solution that allows dynamic positioning of both image and text elements on the page.