Re: BOX PROBLEM

LOL at the Lorem Ipsum sidebar.

Vertical Stretching of Content DIVs

Nested DIV Approach w/relative positioning

Left Content is Longer

This is the content of a second div called FullHeight.

This is the content for the Main DIV. It should appear on the left-hand side.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Right Content is Longer

This is the content of a second div called FullHeight.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

This is the content for the Main DIV. It should appear on the left-hand side.

(note: overflow was set to hidden to not obscure this text)

Why doesn't this work?

Give the Main DIV a green border, and change its width from 410px to 310px.

This is the content of a second div called FullHeight.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

This is the content for the Main DIV. It should appear on the left-hand side.

The FullHeight DIV is not affected, because absolute positioning takes it out of the flow and reduces its dimensions to zero. Thus it does not affect its parent element.

Table-like Approach w/ Floats

I stuck a spacer DIV into the table-like example which keeps the Main DIV from collapsing. This can also be accomplished (in Mozilla and IE5) by setting Main's position to relative. For Opera, however, the spacer DIV is a must.

Left Content is Longer

This is the content for the Main DIV. It should appear on the left-hand side.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
This is the content of a second div called FullHeight.

Right Content is Longer

This is the content for the Main DIV. It should appear on the left-hand side.
This is the content of a second div called FullHeight.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Why does this work?

Absolute positioning removes an object from the flow and shrinks its dimensions to zero, while float just removes it from the flow but doesn't keep its size from affecting other objects (like the parent element).

Opera

Yes, Opera 6 gets its own special section (to be fair if I had Mac IE5 to test with, it would probably get its own section too). Opera has a problem with bleeding margins. The reason the Main DIV has a 1px white border is because if I don't add it, Opera drags the inner DIVs (R and L) out of Main and juts them against the next block object (which in this case are the h3's). If you care more about a pixel-perfect layout than you do about Opera, you can take out the spacer DIVs and get ride of the border around Main and your code will still work in both Mozilla and IE5 (after adjusting for the box model problems, of course).

Random Notes

CSS3 should have a property called innerclear so that we don't have to put <div style="clear: both;">'s in all DIVs containing only floated elements that we want un-collapsed.

ta-dah! by Micah Sittig in xhtml and css, last updated 2002.07.11