First let me write my HTML code (it's dummy).
<body> <div id="rightContent"> <table border="1"> <tr /> ... ... ... </table> </div> <div id="leftContent"> <div id="navigation"> ... ... </div> </div> </body>
and I have CSS Rules as follows.
The problem I'm facing is that the width of the table in rightContent area is bigger, and so it pushes my leftContent area including the navigation menu down.
How do i overcome this.
You don't need to say width:
You don't need to say width: 100% on html or body, that's already there.
You aren't getting any benefit from height: 100% on your floats, as height is determined by the set height of the parents, and this is not the case in your code. All browsers are ignoring your height: 100%.
Anyway, to make a scrollbar, give both floats a parent box.
<div id="container"> ...the 2 floats... </div>
And give #container an explicit width that is wide enough to contain both floats and their tables. Explicit means not in %, but in px or em or pt or whatever. Your floats can remain with % widths, and they will be % of #container's width.
It might also help to give the tables set widths as well. Which can be done in the CSS.
We don't know if you have a Doctype. If you don't, be sure to have one.