1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved: Full Height XHTML/CSS

Discussion in 'Web Design & Development' started by Saikuron, Oct 6, 2008.

Thread Status:
Not open for further replies.
  1. Saikuron

    Saikuron Thread Starter

    Joined:
    Sep 17, 2008
    Messages:
    21
    Can't seem to get this to work. :(

    Goal:
    [​IMG]
    [​IMG][​IMG]

    Current:
    [​IMG]
    [​IMG]

    - Columns are Fixed - Fluid - Fixed
    - Regardless of whatever column is the longest, the other two needs to be the same height of the longest column.
    - The minimum height based on the browser's viewport.

    Footer is optional really if its a problem. The scrollbar always shows, and it does something weird in IE anyways. :confused:

    In terms of browser support, FX2/IE7. IE 6 is a maybe.

    I've been googling and throwing in full height codes left and right to no avail. Some might still be present...

    Any help is greatly appreciated. :)

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!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>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Halp!</title>
    <style type="text/css">
    * {
    margin: 0;
    }
    
    html, body {
    margin:0;
    padding:0;
    height: 100%;
    background: #2e2e2e;
    color: #FFF;
    line-height:1.5;
    }
    
    #pagecontainer {
    position:relative; /* needed for footer positioning*/
    
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    
    min-height:100%; /* real browsers */
    }
    
    #topsection{ /*Height of top section*/
    background: #FF0;
    height: 80px;
    }
    
    #contentwrapper{
    float: left;
    width: 100%;
    }
    
    #contentcolumn{ /* 0 RightColumnWidth 0 LeftColumnWidth*/
    margin: 0 200px 0 200px;
    background: #F00;
    }
    
    #leftcolumn{ /*Width of left column*/
    float: left;
    width: 200px; 
    margin-left: -100%;
    padding-bottom: 20px; /* bottom padding for footer */
    height: 100%;
    background: #00F;
    }
    
    #rightcolumn{ /*Width of right column*/
    float: left;
    width: 200px; 
    margin-left: -200px;
    padding-bottom: 20px; /* bottom padding for footer */
    height: 100%;
    background: #0F0;
    }
    
    #footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#888;
    height: 20px;
    padding:0;
    margin:0;
    }
    </style>
    </head>
    <body>
    <div id="pagecontainer">
    <!-- Wrap entire page in a div -->
    <div id="contentwrapper">
    <!-- Wrap main column in a div -->
    <div id="contentcolumn">
    <!--Page Heading-->
    <div id="topsection"><h1>Header</h1></div>
    Main Column
    </div>
    </div>
    
    <!-- Left Column -->
    <div id="leftcolumn">
    Left Column
    </div>
    <!-- Right Column -->
    <div id="rightcolumn">
    Right Column
    </div>
    <!-- Footer -->
    <div id="footer"><p>Footer</p></div>
    </div>
    </body>
    </html>
    
     
  2. globex

    globex Guest

    Joined:
    Oct 6, 2008
    Messages:
    3
  3. Saikuron

    Saikuron Thread Starter

    Joined:
    Sep 17, 2008
    Messages:
    21
    Tried that, can't seem to get it to work with 3 columns.
     
As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/756593

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice