@ShitalShah: I'm not quite sure what you mean by "this", but I've implemented countless horizontal menu and the float left and overflow is IMO the cleanest and most reliable way to implement horizontal menu across many different browsers, old and new. For adding separators, I'd usually use left border (or background images for fancier separators, if you don't need to care about old browser's then you can also use CSS3 border-image). I don't quite understand what you mean by differing heights, want to explain more or add a fiddle?
I usually use float: left; and add overflow: auto; to solve the collapsing parent problem (as to why this works, overflow: auto will expand the parent instead of adding scrollbars if you do not give it explicit height, overflow: hidden works as well). Most of the vertical alignment needs I had are for one-line of text in menu bars, which can be solved using line-height property. If I really need to vertical align a block element, I'd set an explicit height on the parent and the vertically aligned item, position absolute, top 50%, and negative margin.
The best thing about float: left and overflow: auto is that it works all the way back to IE6 without hacks, probably even further.
The reason I don't use display: table-cell is the way it overflows when you have more items than the site's width can handle. table-cell will force the user to scroll horizontally, while floats will wrap the overflow menu, making it still usable without the need for horizontal scrolling.
This cleared up a lot about clearing and I didnt know that overflow could do this. Im used to the :after method where u add a content: "." and visibility:hidden. Thanks for this
This excellent point, not mentioned in MANY popular tutorials. Couple of questions: Is this actually tested in different browsers? What's your method of choice to draw separator between two blocks such as nav and content? The reason I ask is because if above divs are of different height it would be difficult.