1 reply [Last post]
Last seen: 13 years 27 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).

  <div id="rightContent">
    <table border="1">
      <tr />
  <div id="leftContent">
    <div id="navigation">

and I have CSS Rules as follows.

html, body{

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
Last seen: 11 years 32 weeks ago
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...

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