Divs With Both Position:relative and Float:left

Is positioning and floating mutually exclusive

[poppyrich]

I recently ran accross a two equal-height column layout template which uses divs that are relatively positioned AND floated as well.
(It works very well. Cross-browser, no IE-specific rules.)

However, I had always thought that float and position were mutually exclusive. That it was either one or the other. I haven't checked the specs, but I guess not because it's working. It just never occurred to me to use both in combination.

Has anyone had experience with this? Is it fairly common?

[swa66]

It's legal according to the CSS2.1 standard:
[w3.org...]

Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position.

So the behavior is intended to be to first float it, and influence other elements in that spot and only then move it to a new shifted position without influencing the position of other elements again.

I think there are two basic -within the standard- reason to use position:relative

• to nudge elements from their place and shift them about using top, bottom left and/or right statements.
  
• to give the element "position" so that absolutely positioned children use it as a reference instead of the viewport (or a higher-up parent that has position)

From what I've seen there are side-effects in IE to position:relative, but I tend to avoid using it for side effects, so I've no exact idea what it does to IE.

FWIW: The interaction between display, float and position in the standard is here:
[w3.org...]

Maybe a short code fragment on how to do this would be in order ?

[poppyrich]

Thanks for the input, swa66.

There's an artist/web designer named Matthew James Taylor <snip> who has some template layouts featured on his site that make extensive use of floats with position:relative to create columns.

Two things struck me about them:
1) They don't need any IE-only rules. Good for IE6 AND 7.
2) They seem to solve the problem of creating equal height columns based on the height of the column with the most content, WITHOUT resorting to filler and/or javascript.

Check 'em out. Did this guy stumble upon something others have missed? Does the approach have value? Or what?

Just found them interesting... let me know what you think.

[edited by: swa66 at 3:17 am (utc) on Dec. 26, 2008]

[swa66]

Ah, I've seen that one before.

It adds html (extra wrappers) and positions those wrappers without adjusting the width, so it only works for repeated or solid color backgrounds. The wrappers are expanded and positioned to appear like a background, the columns themselves are not.

Personally it seems more or less similar to using flexifloat, or other methods of using faux columns on the parent.
Last I looked at ti, the math to position it all is going to be somewhat of a nightmare if you need to change something after a year or two.

As for not using conditional comments: it does use statements that are there only for IE, so why not only give them to the specific versions of IE that need them? Worse: there are statements that trigger side effects in IE, something that might come and haunt you in the long run unless it's well documented. To Matthew's credit his text does explain it.

It doesn't solve the problem in a direct manner and that does have consequences such as the inability to e.g. have a child of a column go sit near the bottom of it's column by using absolute positioning inside a column that has been given position itself, similarly, aligning a background near the bottom etc is all much harder.