Solved: Full Height XHTML/CSS

Saikuron · Oct 6, 2008

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>

globex · Oct 6, 2008

Maybe this will help:

http://www.xs4all.nl/~peterned/examples/csslayout1.html

Saikuron · Oct 6, 2008

Tried that, can't seem to get it to work with 3 columns.

Log in or Sign up

Solved: Full Height XHTML/CSS

Saikuron Thread Starter

globex Guest

Saikuron Thread Starter

Welcome to Tech Support Guy!

Need help Setting up HTML files to start up full screen on 2 monitors

Log in or Sign up

Solved: Full Height XHTML/CSS

Saikuron Thread Starter

globex Guest

Saikuron Thread Starter

Welcome to Tech Support Guy!

Need help Setting up HTML files to start up full screen on 2 monitors

Useful Searches