Solved: Full Height XHTML/CSS

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Saikuron

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

Goal:



Current:



- 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>
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

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 807,865 other people just like you!

Latest posts

Top