0

Here's the code I've come up to layout my page. The problem is, this is all statically defined. What I would like is for this to be dynamic, i.e. changes sizes based on the size of the browser used for viewing. I'm pretty sure that all of the divs can be fixed in size for a particular page dimension. The Menu and Content panes should be the divs that adjust to fit. The content div will be scrollable as necessary.

Can I do this with CSS or would jQuery be necessary - or is there a better approach altogether?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        html, body  
        {
            margin: 0;
            padding: 0;
        }

        #container
        {
        }

        #toolbar
        {
            background-color: Gray;
            width: 100%;
        }

        #PageDescription
        {
            position: absolute;
            background-color: Purple;
            width: 100%;
            text-align: center;
        }
        #RestOfPage
        {
            position: absolute;    
            background-color: White;
            top: 82px;
            height: 905px;
            width: 1800px;
        }
        #Footer
        {
            position: absolute;
            top: 987px;
            left: 0;
            background-color: Yellow;
            width: 100%;
            height: 30px;
        }
        #LeftPane
        {
            position: inherit;
            width: 120px;
            background-color: Lime;
            height: 100%;
        }
        #RightPane
        {
            position: inherit;
            width: 100%;
            background-color: Silver;
            left: 120px;        
            height: 100%;
        }
    </style>
</head>
<body>
        <div id="toolbar">
            <label for="Category">Category: </label><select id="Category"></select>
        </div>
        <div id="Footer"></div>
        <div id="PageDescription">
            <h1>Page Description</h1>
        </div>
        <div id="RestOfPage">
            <div id="LeftPane">Menu</div>
            <div id="RightPane">Content Content Content</div>
        </div>
</body>
</html>
2
  • http://jsfiddle.net/QwAGV/ to play with.
    – Andrew
    Jul 28, 2011 at 14:42
  • 1
    You are positonning (almost) all (child of body) elements in absolute, this is a bad bad thing :( . Right now, your <body> element only contains the #toolbar element. Everything else is out of its context. You should redo all this template with relative positionning instead.
    – Kraz
    Jul 28, 2011 at 14:53

2 Answers 2

1

Redo the template using relative positioning, float, clear, and percentages. Ideally, this is what each of your code snippets should have, using borrowed and edited code:

#LeftPane {
    position: relative;
    float: left;
    width: 13%;
    background-color: Lime;
    /* You should avoid using named colors, try 
     * #98ED00 or another hex value*/
    height: 100%;
}
#RightPane {
    position: relative;
    float: left;
    margin-left: 2%;
    width: 85%;
    background-color: Silver;
    height: 100%;
}

With this CSS, the page should rescale just fine. And for future reference, avoid absolute. It's inflexible, hard to move around, and every element will put its content right on top or underneath that styled element unless explicitly told NOT to do so. In short, it'll only look good on your computer.

Also, this solution can be fully implemented in CSS. No jQuery is necessary.

Here are some relevant links for you to reference in the future, courtesy of W3C Schools.

CSS Positioning, CSS Floating, CSS Box Model

2
  • 1
    absolute is okay on elements within elements with relative positioning.
    – ayyp
    Jul 28, 2011 at 18:49
  • Other than that though it should certainly be avoided. Especially here because he doesn't have all his in a container.
    – ayyp
    Jul 28, 2011 at 18:52
0

You can use percent based width and height with the #RestOfPage too. Look into using min-height/max-height in addition to the percent based layout. That will stop things from rearranging unexpectedly.

1
  • I really need the LeftPane to be a fixed width with the RightPane resizing to fill. I understand all the absolute stuff is bad, but I was just trying to get what the page should look like, not how it should be coded. I made a lot of attempts using floats, and relative positioning, but always ran into a snag. Jul 30, 2011 at 14:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.