CSS Layout Divs

Truce77 · March 20th, 2004, 10:49 PM

Hey,

I'm not sure if I'm in the right part of the forum. If I'm not please redirect me.

I have a page using CSS. It has 3 layout divs. The look like this.

-------------------------
Masthead
-------------------------
| | |
| | |
|NavBar | Content |
| | |
| | |

There is also a footer right below it:

-------------------------
Footer
-------------------------

The problem is: That I can't get the footer to stay below the menu and below the content while having the navbar and the content staying beside themselves.

Here's the important CSS code:

/* -------------MASTHEAD------------- */
#layoutMasthead{
    margin: 0;
    padding: 10px 0px;
    border-bottom: 1px solid #cccccc;
    width: 100%;
}

/* -------------NAV------------- */
#layoutNavBar{
    margin: 0;
    top: 72px;
    left: 0px;
    width: 210px;
    padding: 0px;
    background-color: #eeeeee;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

/* -------------CONTENT------------- */
#layoutContent {
    position: absolute;
    left: 0px;
    top: 72px;
    width: 75%;
    margin-left: 210px;
    padding: 0 3% 0 0;
}

And the page layout looks like this (with more content of course):

<div id="layoutMasthead">
  ...
</div>

<div id="layoutNavBar">
  ...
</div>

<div id="layoutContent">
  ...
</div>

<div id="footer">
  ...
</div>

If the footer is important (I'm thinking it isn't) here it is:

/* -------------FOOTER------------- */
#footer{
    clear: both;
    border: 1px solid #cccccc;
    font-size: 75%;
    color: #cccccc;
    padding: 10px 10px 10px 10px;
    margin-top: -1px;
}

#footer img{
    padding: 4px 4px 4px 0px;
    vertical-align: middle;
}

Any help would be appreciated.

richard.york · March 21st, 2004, 10:39 PM

ARg! 2nd attempt at posting a reply...

There is an HTML-specific forum.. its under the 'web' category. Ok, that being said, here is a simple example of a liquid layout.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type='text/css' media='all'>

            #body {
                width:    100%;
            }

            #header {
                background: gray; 
                border: 1px solid black; 
                margin: 1px 0px 1px 0px;
            }

            #menu {
                width: 30%;
                float: left;
                background: gray; 
                border: 1px solid black;
            }

            #content {
                margin-left: 30%;
                background: gray;
                border-top: 1px solid black;
                border-bottom: 1px solid black;
                border-right: 1px solid black;
                border-left: 3px solid white;
            }

            #footer {
                background: gray;
                border: 1px solid black;
                margin: 1px 0px 1px 0px;
                clear: left;
            }

        </style>
    </head>
    <body>
        <div id='body'>
            <div id='header'>
                test
            </div>
            <div id='menu'>
                test
            </div>
            <div id='content'>
                test
            </div>
            <div id='footer'>
                test
            </div>
        </div>
    </body>
</html>

I didn't dig into your code too deeply.. the above example uses a simple float to get the effect of side-by-side divs. This produces a liquid layout effect that works in both MSIE 6 and Mozilla Firefox. A strict Doctype is neccessary here to invoke standards mode, lest IE ignore or incorrectly render certain properties.

I did notice that your mark-up takes the approach of absolute positioning. If this is the way your really want to go with this then here is a decent article on that method:
http://www.mardiros.net/liquid-css-layouts.html

hth,
Rich

:::::::::::::::::::::::::::::::::
Smiling Souls
http://www.smilingsouls.net
:::::::::::::::::::::::::::::::::

richard.york · March 29th, 2004, 07:29 PM

Also, I've just done a liquid layout design for my PEAR Mail_IMAP homepage at http://www.spicypeanut.net. I've done quite a bit of tinkering to get it to maintain size and formatting across IE6, Moz Firefox and Opera 7 using nothing but standards acceptable code (CSS, XHTML and a couple lines of JavaScript). Feel free to poke around the source code.

: )
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::