Forum Moderators: not2easy
This is the two columns in question. (I'm not sure if i can post the link here, so if it's not apropriate mods please take it down)
<snip>
So i was just wondering how i would use faux columns with this. I did some research into them and wasn't quite sure how they worked.
Thanks,
Josh
[edited by: swa66 at 3:40 pm (utc) on Sep. 2, 2009]
[edit reason] No URLs, please see ToS and Forum Charter [/edit]
The bg image is made up of a composite of each column's bg image, so it goes all the way down on both columns, but the columns are actually just displayed over the top of the container's bg image.
The ALA article that's #1 on google for "faux columns" shows how to do it. If you have specific problems post them, I'm sure someone will be able to assist you. HTH.
I first saw this cool trick at Stu Nicholls' CSSplay. The trick is to use large offsetting (positive then negative) bottom-padding and bottom-margin for the columns and set overflow:hidden for the page container.
Works with fixed, liquid or both columns (someone here probably has a better IE6/7 hack solution to overcome the various IE float bugs to make this work - but this works fine).
Example (you can increase or reduce text in either column):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>2 columns - Fixed left, flexible right equal-height</title>
<style type="text/css">
body {font-size:76%; font-family: verdana, arial, sans-serif; background: #FFFFDF; word-wrap:break-word;}
#container {overflow:hidden; background:#333;}
.menu {float:left; width:280px; padding:5px; color:#FFFFCC; background: #800000;}
.content {margin-left:300px; padding:.5em; background:#CCCCCC}
.menu, .content {padding-bottom:32767px; margin-bottom:-32767px;}
h1 {font-size:150%; margin:0; padding:10px 0; color:#fff;}
h3 {font-size:130%; margin:0; padding:8px 0;}
li {list-style:none; text-decoration:none; margin:.1em; padding:.25em}
li li {list-style:none; text-decoration:none; margin:.1em 0; padding:.25em 0}
li a:link, li a:visited {display:block; background:#555; padding:.25em; border:1px solid #fff; color:#FFFFCC; text-decoration:none}
li a:hover, li a:active {background:#FFFFCC; padding:.25em; border: 1px solid #000; color:#800000; text-decoration:none}
p {font-size:1em; line-height:1.5em; margin:0; padding:5px 0;}
#header {background:#555; margin-bottom:2px; padding:1.5em; color:#444; font-weight:bold}
.contained {padding:10px;}
#footer {width:100%; border-top:2px solid #333;background:#555; float:left; text-align:center }
#footer p,
#header p {color:#fff;}
#footer a {color:#fff;}
#footer a:hover {text-decoration:none;}
</style>
<!--[if lte IE 7]>
<style type="text/css">
body {word-wrap:break-word}
li {margin:.1em; padding:.25em}
li li {list-style:none; text-decoration:none; margin:0; padding:.25em 0}
.content {display:inline; float:left; margin-left:0; margin-right:0;}
#container {display:inline-block;}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<h1>Fixed left flexible right equal-height 2 columns with header and footer</h1>
<p>This is bullet-proof (minimize your browser window and it does not blow-up).
It contains some fundemental wireframe requirements that should NOT be
modified. Using percentage height attributes defeat the whole point of
the faux equal height columns. This is an extremely elegant solution
that Stu Nicholes created rather than using graphics.</p>
</div>
<div class="menu">
<div class="contained">
<h3>Left 300px</h3>
<ul>
<li><a href="#">option 1</a></li>
<li><a href="#">option 2</a></li>
<li><em><strong>option 3:</strong></em>
<ul>
<li><a href="#">sub-option 1</a></li>
<li><a href="#">sub-option 2</a></li>
</ul></li>
<li><a href="#">option 4</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="contained">
<h3>Remainder in %</h3>
<h3>The site content comes here and needs to fill the screen</h3>
<p>No fauex column image. Background colors give equal height impression.
Layout concept is originally from a Stu Nicholes idea. This column is not
floated for modern browsers, IE7 and above, but it IS floated left for
IE6 (via conditional comment). </p>
<p>You can add as much content as you like and the menu will still show equal
height. Aliquam eu nibh eget diam hendrerit pellentesque. Proin ac risus
metus. Curabitur ipsum ligula, bibendum ac rhoncus ut, mollis quis dolor.
Proin lorem est, venenatis nec pellentesque eget, dignissim vitae nisi.
Pellentesque ornare dignissim tempor. Sed elit sapien, pellentesque quis
accumsan eget, vestibulum a sapien. Aliquam at consectetur odio. Proin
ut velit nec nunc commodo iaculis sit amet eget lacus. Donec condimentum
mollis lacus non interdum. Vestibulum at lectus lorem.</p>
<p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
excepturi sint occaecati cupiditate non provident, similique sunt in culpa
qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,
cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor
repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum
necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut
aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus
asperiores repellat."</p>
<p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
excepturi sint occaecati cupiditate non provident, similique sunt in culpa
qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,
cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor
repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum
necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut
aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus
asperiores repellat."</p>
</div>
</div>
<div id="footer">
<p>Footer clears the ".menu" class here by using "set a float
to clear a float". (In IE6 it clears ".content" class). </p>
<p>If
adding a third column, float it right, remove the footer
float and set a simple "clear:both" element. </p>
</div>
</div>
</body>
</html>
