Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > PHP/MySQL > PHP How-To
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
PHP How-To Post your "How do I do this with PHP?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the PHP How-To section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old March 20th, 2004, 10:49 PM
Registered User
 
Join Date: Mar 2004
Location: , , .
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default CSS Layout Divs

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.
Reply With Quote
  #2 (permalink)  
Old March 21st, 2004, 10:39 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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
:::::::::::::::::::::::::::::::::
Reply With Quote
  #3 (permalink)  
Old March 29th, 2004, 07:29 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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
::::::::::::::::::::::::::::::::::::::::::
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Css layout not work well in Firefox kumiko CSS Cascading Style Sheets 0 March 31st, 2008 10:27 AM
divs inside divs: theory? Giant_robot_sandwich CSS Cascading Style Sheets 11 September 13th, 2006 03:56 PM
CSS Layout DeadMeatGF CSS Cascading Style Sheets 2 November 5th, 2005 03:23 PM
Is CSS the best for making website layout?? DSteven CSS Cascading Style Sheets 3 August 23rd, 2005 05:45 AM
CSS layout issue Groundhog1248 CSS Cascading Style Sheets 1 March 2nd, 2005 09:13 AM



All times are GMT -4. The time now is 06:56 AM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.