CODEWITHSUNDEEP
jquerycss-tables
Eric Gurney
Eric Gurney

Reputation: 263

CSS or jQuery for this table-style layout

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>

Upvotes: 0

Views: 692

Answers (2)

Edwin
Edwin

Reputation: 2114

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

Upvotes: 1

Justin Thomas
Justin Thomas

Reputation: 5848

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.

Upvotes: 0

Related Questions