Side By Side Panes

Question

I'm building a HTML template for my site and would like to have a main content pane on the left and a navigation pane on the right (similar to Twitter).

I'm assuming DIVs are not the preferred approach since they are by defaulted listed top-to-bottom. I've played around with float:left and float:right but those cause the parent div to not expand appropriately vertically.

I've seen references to using tables (seems like a step backwards) and SPANs (which I haven't been able to use to produce the right effect).

What is the best practice for accomplishing side-by-side panes in HTML?

Any advice or examples would be greatly appreciated.

Answer 1

I'm assuming DIVs are not the preferred approach since they are by defaulted listed top-to-bottom.

Why would you assume that when the example you gave, Twitter, uses them?

The parent div can be made to expand to the height of the larger of the two columns by putting a div below the two columns within the container div with clear: both as its CSS.

Answer 2

DIVs with float is probably your best bet. What is your problem with the height? Have you tried doing height: auto for the div?