Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Super Moderator
    Join Date
    May 2005
    Location
    Southern tip of Silicon Valley
    Posts
    2,874
    Thanks
    2
    Thanked 164 Times in 159 Posts

    Need help in positioning main content and footer div containers

    I'm reworking my email administration site to use div containers instead of iframes, but I'm not very skilled in css so I'm looking for some assistance in fixing the positioning.

    It's a fairly basic setup. The main div container sets the height, width (scaled for 1024x768) and centers the page. The other 4 main div containers are the header, horizontal nav bar, main content, and footer which are all also centered and layered in that order.

    The problem is with the positioning of the main content container and the footer and to prevent vertical scrolling of the main page container. The footer needs to be set at the absolute bottom and the height of the main content div needs to be fluid and adjust its size between the nav bar and footer without any spacing in-between. Currently, the main content container extends beyond the footer when viewed in FF and in both FF and II, the footer is past the end of the screen and required scrolling to view it.

    How do I fix the css to force the footer to the bottom of the screen and instead of scrolling, the main content container would adjust its height accordingly.
    Code:
    html {height:100%;}
    
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      background-color: #cccccc;
      font-family: arial, serif;
      font-size: 9pt;
    }
    
    h1 {
      position: relative;
      margin: 0;
    }
    
    table {
      margin: auto;
      padding: 5px;
    }
    
    caption {
      margin: auto;
      padding: 5px;
      color: #0000ff;
      text-align: center;
      font-size: 125%;
      font-weight: bold;
    }
    
    td, th {
      text-align: left;
      padding-left: 5px;
      padding-right: 5px;
    }
    
    #page_container {
      position: relative;
      width: 950px;
      height: 100%;
      margin: auto;
    }
    
    #header {
      height: 130px;
      padding: 10px;
      text-align: center;
    }
    
    #nav_bar {
      background-color: #eeeeee;
      padding: 5px 0 5px;
      text-align: center;
      word-spacing: 10px;
      font-weight: bold;
    }
    
    #content {
      position: relative;
      height: 100%;
      padding-bottom: 150px;
      overflow: auto;
    }
    
    * html #container {
      height: 100%;
    }
    
    #footer {
      position: absolute;
      bottom: 0px;
      height: 130px;
      width: 100%;
      background-color: #eeeeee;
      text-align: center;
      color: Red;
      overflow: auto;
    }
    
    #header, #content {
      background-color: white;
      text-align: center;
    }
    
    #fatal {
      border: thin solid grey;
      float: right;
      width: 35%;
      padding: 10px;
    }
    
    #warning {
      float: left;
      width: 40%;
      padding: 10px;
    }
    
    .left {
      float: left;
      margin-left: 10px;
    }
    
    .right {
      float: right;
      margin-right: 10px;
    }
    I'm using an html template, so this is the source of the rendered page. If it would help, I could also post the template source which will include additional details.
    Code:
    <!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" xml:lang="en" lang="en">
    
    <head>
      <title>Email Administration</title>
      <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
      <link rel="stylesheet" type="text/css" href="/emadmin/admin.css" />
    </head>
    
    <body>
    <div id="page_container">
    
      <!-- begin header container -->
      <div id="header">
        <div class="left"><img src="/emadmin/left-logo.gif" alt="" /></div>
        <div class="right"><img src="/emadmin/rt-logo.gif" alt="" /></div>
        <div><img src="/emadmin/name.jpg" alt="" /></div>
        <div><h1>Email Administration</h1></div>
        <span class="left">emhttp101</span>
        <span class="right"><a href="login.pl?Logout=Logout">Logout</a> rkb</span>
      </div>
      <!-- end header container -->
    
      <!-- begin navigation bar -->
      <div id="nav_bar">
        <a href="search_v2.pl">Search</a>
        <a href="modify_v2.pl">Modify</a>
        <a href="delete_v2.pl">Delete</a>
        <a href="passwd_v2.pl">ChgPassword</a>
      </div>
      <!-- end navigation bar -->
    
      <!-- begin content container -->
      <div id="content">
        <h2>Search Address Book</h2>
        <form method="post" action="search_v2.pl" enctype="multipart/form-data">
          By:
          <select name="searchfield">
            <option value="email">Login ID</option>
            <option value="lastname">Last Name</option>
            <option value="firstname">First Name</option>
            <option value="label">Description</option>
          </select>
          <input type="text" name="searchvalue" />
          <input type="submit" name="locate" value="Locate User" />
        </form>
        <hr />
    
        <!-- start of main contents i.e., results table from DB search -->
        <!-- end of DB results -->
      </div>
      <!-- end content container -->
    
      <!-- begin container to display error messages -->
      <div id="footer">
        
    
        
      </div>
      <!-- end of error container -->
    
    </div>
    </body>
    </html>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    FishMonger (10-12-2007)

  • #3
    Super Moderator
    Join Date
    May 2005
    Location
    Southern tip of Silicon Valley
    Posts
    2,874
    Thanks
    2
    Thanked 164 Times in 159 Posts
    Thanks Aero, those examples should get me going on the right path.

  • #4
    Super Moderator
    Join Date
    May 2005
    Location
    Southern tip of Silicon Valley
    Posts
    2,874
    Thanks
    2
    Thanked 164 Times in 159 Posts
    Status update:

    I used the css code from the "bodyfix" example since it was the closest to the style I was attempting. I adjusted the widths, heights and colors to meet my requirements and it worked great in FF but not in IE. The footer was positioned correctly but main content container still grew/extended beyond the footer when the table from the db call grew.

    At first I thought that my adjustments to the heights goofed things up, so I started over and did a straight copy/paste without making any adjustments, but still had the same problem in IE. I even changed the DOCTYPE from Transitional to Strict and validated the code, but still no go in IE. The odd thing is that the example itself at cssplay appears works properly in both FF and IE.

    I'd really appreciate it if someone could point out what I'm doing wrong.

    Here's the current css that I'm using.
    Code:
    html {
            height:100%;
            max-height:100%;
            padding:0;
            margin:0;
            border:0;
            background:#53829d;
            font-size:85%;
            font-family:georgia, palatino linotype, times new roman, serif;
            /* hide overflow:hidden from IE5/Mac */
            /* \*/
            overflow: hidden;
            /* */
    }
    
    body {
            height:100%;
            max-height:100%;
            overflow:hidden;
            padding:0;
            margin:0;
            border:0;
            background:#0050a0;
    }
    
    #content {
            display:block;
            overflow:auto;
            position:absolute;
            z-index:3;
            top:167px;
            bottom:135px;
            width:850px;
            margin-left:-426px;
            left:50%;
            padding-bottom: 25px;
            border-left:1px solid #000;
            border-right:1px solid #000;
            background:#fff;
            text-align: center;
    }
    
    * html #content {
            top:0;
            bottom:0;
            height:100%;
            width:850px;
            border-top:170px solid #fff;
            border-bottom:150px solid #fff;
    }
    
    #head {
            position:absolute;
            padding-top: 10px;
            margin-left:-426px;
            left:50%;
            top:0;
            width:850px;
            min-width:850px;
            height:130px;
            background:#fff;
            text-align: center;
            font-size:1em;
            z-index:5;
            border:1px solid #000;
    }
    
    * html #head {
            top:2px;
            width:850px;
            height:140px;
    }
    
    #foot {
            position:absolute;
            margin-left:-426px;
            left:50%;
            bottom:0;
            width:850px;
            min-width:850px;
            height:130px;
            font-size:1em;
            z-index:5;
            border:1px solid #000;
            font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
            font-weight:bold;
            color:#000;
            background:#fff;
            overflow:auto;
    }
    
    * html #foot {
            bottom:2px;
            width:850px;
            height:130px;
    }
    
    #nav_bar {
            position:absolute;
            padding-top: 5px;
            margin-left:-426px;
            left:50%;
            top:141px;
            width:850px;
            min-width:850px;
            height:20px;
            background:#0050a0;
            font-size:1em;
            text-align: center;
            word-spacing: 10px;
            font-weight: bold;
            z-index:6;
    }
    
    #fatal {
            width: 35%;
            float: right;
            padding: 10px;
            border:1px solid #000;
            color: #ff0000;
    }
    
    #notify {
            width: 35%;
            float: left;
            padding: 10px;
            border:1px solid #000;
    }
    
    .left {
            float: left;
            margin-left: 10px;
    }
    
    .right {
            float: right;
            margin-right: 10px;
    }
    
    a.nav_link, a.nav_link:visited {
      font-size:1em;
      text-decoration:none;
      color:#ddd;
      }
    
    a.nav_link:hover {
      color:#fff;
      text-decoration:none;
      }
    
    .grey {color:#888;}
    
    .ltgrey {color:#ddd;}
    
    h1 {
            position: relative;
            margin: 0;
    }
    
    fieldset {
            border-style: none;
    }
    
    table {
            margin: auto;
    }
    
    caption {
            margin: auto;
            padding-top: 10px;
            padding-bottom: 5px;
            color: #0000ff;
            text-align: center;
            font-size: 125%;
            font-weight: bold;
    }
    
    td, th {
            text-align: left;
            padding-left: 5px;
            padding-right: 5px;
    }

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Did you notice the first line?
    Code:
    <!-- Put IE into quirks mode -->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    FishMonger (10-14-2007)

  • #6
    Super Moderator
    Join Date
    May 2005
    Location
    Southern tip of Silicon Valley
    Posts
    2,874
    Thanks
    2
    Thanked 164 Times in 159 Posts
    LOL, It's always the simplest things that seem to bite us, or at least they bite me.

    Works now, thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •