Tue, 2009-12-01 09:45
Hi All,
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.
html, body{
margin:0;
padding:0;
width:100%;
}
div#rightContent {
float: right;
width: 70%;
height: 100%;
}
div#leftContent {
float: right;
width: 30%;
height: 100%;
}
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.
Tue, 2009-12-01 11:18
#1
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.