1 reply [Last post]
ravishroshan
Offline
newbie
Last seen: 12 years 24 weeks ago
Timezone: GMT+5.5
Joined: 2009-12-01
Posts: 1
Points: 2

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.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 29 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

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.

I'm no expert, but I fake one on teh Internets