Solved: Full Height XHTML/CSS

Saikuron · 06-Oct-2008, 09:59 AM #1

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.

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 · 06-Oct-2008, 02:15 PM #2

Maybe this will help:

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

Saikuron · 06-Oct-2008, 04:15 PM #3

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

Tag Cloud
access acer asus bios bsod computer crash desktop driver drivers error ethernet excel freeze gaming hard drive hardware hdmi internet laptop malware memory modem monitor motherboard netgear network printer problem ram registry repair router slow software sound toshiba trojan usb video virus vista wifi windows windows 7 windows 7 32 bit windows 7 64 bit windows xp wireless xbox

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Search
Search for:

Find the solution to yourcomputer problem!

Find the solution to your
computer problem!