Question

I have a page which is divided up into 3 divs, left center and right. I don t want to display anything in the left and right, they just frame the page.

    #leftDiv
{
    background-color: Gray;
    width: 10%;
    left: 0px;
    top: 0px;
    position: absolute;
    height: 100%;
}

#rightDiv
{
    background-color: Gray;
    height: 100%;
    width: 10%;
    left: 90%;
    top: 0px;
    position: absolute;
    clear:both;
}

The center div has a table, which allows the user to select how many rows to see. If they chose a large value then the body of the table went beyond the bottom of the left and right div.

To correct this I put the following code in

if ($("#leftDiv").length == 1) {
                $("#leftDiv").height($("body").height() + "px");
            }
            if ($("#rightDiv").length == 1) {
                $("#rightDiv").height($("body").height() + "px"); ;
            }

this works fine until the user selects a smaller value than the page size, after selecting a larger value. Then the left and right divs get set to less than 100%. What i need is a way to find out what 100% is in pixels and then I can compare this to the height of the body and decide which is bigger.

Any ideas?

Thanks

John

Answer 1

Use margin: 0 auto

Kill your left and right columns, give your main div a width, and then center that div using an auto left and right margin. For example:

#mainDiv {
  width: 80%;
  margin: 0 auto;
}

Answer 2

Why are you creating empty elements to frame the page? How about setting the body background to the colour you require and:

#center_div {width: /* whatever */;
             margin: 0 auto; /* to center in the viewport */
             overflow: auto; /* or visible */
}

You could leave off the overflow property, and simply use min-width in place of width (I can t remember how cross-browser compatible this is) to define the normal width, in such a way that the content will force the div to be larger as required to display the content.

Answer 3

If the left and right divs don t have any contents, then there s no need for them to be separate divs: apply their formatting to your container div instead, and center your contents div using margin: 0 auto. Obviously, you ll need to give the container div a specified width, and a non-transparent background. Then you can let the browser take care of resizing the window as needed - there s no need for you to reinvent the wheel for that part.

CSS:

#container {background-color:gray;}
#content {background-color:white;width:80%;margin:0 auto;}

Html:

...
<body>
<div id="container">
<div id="content">
...your content here...
</div>
</div>
</body>
...

(If your page doesn t have a container div, then you can apply the background color to the body element instead, and save even more code.)

友情链接