ansaurus

Question

Answer 1

+1 A:

I think you need to add float-right for the rightColumn:

#rightColumn {
    width: 66%;
    height: 100%;
    background-color: #00FF00;
    float: right;
}

As for the height of the columns: I think this is because of the relative layout. To make the height of the columns fit perfectly you could calculate the exact number of pixels, like so:

#leftColumn {
   width: 33%;
   height: 698px;
    background-color: #FF0000;
   float: left;
}
#rightColumn {
    width: 66%;
    height: 698px;
    background-color: #00FF00;
    float: right;
}

(height of body - height of header = 768 - 70 = 698)

but this has the disadvantage that the columns may not grow vertically in case the body grows larger.

ANother approach would be to keep the columns 100%, but glue them to the top of the body. You must give them relative positioning to do that. In addition, you must lift them up t account for th space taken by the header:

#leftColumn {
    width: 33%;
    height: 100%;
    background-color: #FF0000;
    float: left;
    top: -70px;
    position: relative;
}
#rightColumn {
    width: 66%;
    height: 100%;
    background-color: #00FF00;
    float: right;
    top: -70px;
    position: relative;
}

Roland Bouman 2009-12-22 18:39:38

Great! It works! But now I have the problem of right and left column are bigger than divBody.

VansFannel 2009-12-22 18:49:33

Answer 2

A:

If you are looking for something like this, I would highly recommend using YUI Grids. They've already done the work at providing the layouts (across browsers, too), and you just have to populate with your data. Very easy to use, and very nice (and the setup is similar to yours).

JasCav 2009-12-22 18:40:18

Answer 3

+2 A:

Your header has fixed height: 70px; and is pushing the columns down. You can add padding to divBody to counter this: see it in action.

Your also have to make your right column float otherwise it's positioned under the left column instead of being on its right.

You should rely on Blueprint or YUI 2: Grids. If you don't like CSS frameworks, there are other good resources out there like those multi-column liquid layouts.

Note: I don't know whether it's what you meant but 33% + 66% == 99% hence the gap.

Gregory Pakosz 2009-12-22 18:44:03

Thank you very much for your help. I've changed 66% with 67%.

VansFannel 2009-12-22 19:09:13

Answer 4

A:

I think this might help you:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

You don't have to use a grid system and there is no extra javascript or css hacks used.

ryanulit 2009-12-22 18:54:36

ansaurus

tags:

views:

answers:

A problem with Div Layout

related questions