Forum Moderators: not2easy
I am designing a page that has a flexible 2 column layout with a header and footer on top and bottom. Like the diagram below.
HHHHHHHHHHHHH
NAV ZContentZZZ
YYY ZZZZZZZZZZ
YYY ZZZZZZZZZZ
YYY ZZZZZZZZZZ
FFFFFFFFFFFFFFF
I have wrapped the NAV and CONTENT in the same container div because I would like the nav to always be the same height as the content and have both elements touch the footer div. The wrapper div when inspected with firebug does appear to take up the whole 2 column section touching the bottom of the header and the top of the footer, however when I assign height:100% to either the NAV or Content sections inside the wrapper the nav or content divs do not fit to the height of the wrapper. Assigning the same height using height:500px for both the left column and the content column attains the desired look, but does little for the functionality of the page.
I've seemingly tried everything and I'm stumped! I thought that height 100% would scale a div to the size of the parent div. Any help would be greatly appreciated.
I have paired down the code to what I think is the minimal structural elements with the css in the head to illustrate my problem! Thanks in advance!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome!</title><style>
* {
margin:0;
padding:0;
}
#maincontainer {
max-width:1200px;
min-width:740px;
}
#contentwrapper {
float:left;
width:100%;
}
#contentcolumn {
width:100%;
float:left;
}
#leftcolumn {
float:left;
width:214px;
height:100%;
background-color:#FFE89C;
}
#footer {
clear:left;
width:100%;
height:20px;
padding:4px 0;
text-align:left;
background-color:#f2a137;
}
.inner {
height:100%;
padding-right:40px;
margin:0 0 0 40px;
}
#innercontent {
margin:0 0 0 244px;
background-color:#CCC;
}
ul.edit li,ul.nav li {
list-style-position:inside;
margin:0 0 0 5px;
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="contentwrapper">
<div id="contentcolumn">
<div id="leftcolumn">
<div class="inner">
<div id="nav" class="module">
<h2>Navigation</h2>
<ul class="nav" id="navul">
<li>Item 1</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
</ul>
</div>
<div id="address" class="module">
<p>Room 12</p>
<p>1234 Some Dr</p>
<p>Atlanta, GA 30324</p>
<p>Email: me@domain.com</p>
</div>
</div>
</div>
<div class="inner" id="innercontent">Welcome to The Site. Register to get started.
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />Breaks Inserted to Show how the left column does NOT scale using height: 100%<br />
</div>
</div>
</div>
<div id="footer">Footer
</div>
</div>
</body>
I must admit I read the "tableless talk" a lot but don't quite get why it would be a bad thing in this instance. It would just have a 2 column, 1 row table. And the rest of the formatting would be done inside of those without the use of tables.
Here is the test case from above with the use of tables to solve my problem...whats the thought here? Terrible? Lazy solution? Acceptable?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome!</title><style type="text/css">
/*<![CDATA[*/
* {
margin:0;
padding:0;
}
#maincontainer {
max-width:1200px;
min-width:740px;
}
#contentwrapper {
float:left;
width:100%;
}
#contentcolumn {
width:100%;
float:left;
}
#leftcolumn {
float:left;
width:214px;
height:100%;
background-color:#FFE89C;
}
#footer {
clear:left;
width:100%;
height:20px;
padding:4px 0;
text-align:left;
background-color:#f2a137;
}
.inner {
height:100%;
background-color:#999999;
float:left;
}
#innercontent {
padding-bottom:10px;
margin:0 0 0 244px;
background-color:#CCC;
}
ul.edit li,ul.nav li {
list-style-position:inside;
margin:0 0 0 5px;
}
.navtd
{
background-color:#CC6633;
width:230px;
margin:0;
vertical-align:top;
}
table
{
width:100%;
border-collapse:collapse;
}
.contTD
{
background-color:#33CC99;
margin:0;
}
#header
{
background-color:#00FFFF
}
/*]]>*/
</style>
</head>
<body>
<div id="maincontainer">
<div id="header">This is a header</div>
<div id="contentcolumn">
<table>
<tr>
<td class="navtd">Content.</td>
<td class="contTD">Welcome to The Site. <a href="/register">Register</a> to get started.
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
Breaks Inserted to Show how the left column does NOT scale using height: 100%<br />
<br /><br /><br /><br /><br />
Breaks Inserted to Show how the left column does NOT scale using height: 100%<br />
<br /><br /><br /><br /><br />
Breaks Inserted to Show how the left column does NOT scale using height: 100%<br /></td>
</tr>
</table>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
A quick search for 'Faux columns' should give you the answer.
Flexible Faux Columns are quite clever indeed!
However I'm not sure it can work for the project I'm working on where users of the site will be able to select a color of their choosing for background colors without tying cpu cycles up on generating background images on the fly in imagemagick or the likes. Can it?
Maybe this simple fact pigeon hole's me to using tables?
I am still quite curious why faux columns would be preferred over the actual columns of a table. Is it just a purist thing? Or does css load faster? I'm just a bit confused why there is such anti-tablism.
Thanks again marcel!
I don't have a great memory, but I think you know your content will always be taller than your nav, then you should be able to set the height of the nav to be equal to your content, and you woudln't need to use faux columns.
Tables are no as flexible when it comes to positioning and layout, if the designer, or end-user wants to change the layout.
Even if it's a minor reason, it seems that the main reason may be that it is non-semnatic use of HTML... tables should be used for tabular data.
Thank you for the explanation. I would be interested in seeing the site you read if you have a bookmark. I can certainly see how tables can lock you into a look and feel pretty quickly.
I don't have a great memory, but I think you know your content will always be taller than your nav, then you should be able to set the height of the nav to be equal to your content, and you woudln't need to use faux columns.
Yes you are right my content should always be taller than my nav. However I'm never quite sure just how tall it will be. Thats my real problem is I can not have height set to a pixel value because then i start having to deal with overflow and ugly scroll bars in strange places of my page. And using percentage values ie. 100% to both does not work. I am also not willing to use javascript to scale both columns together. And as I previously said I don't think it is feasible use faux columns due to users being able to select their own color from a color picker.
Is there another way that I'm not thinking of to meet all those criteria without using a table or am I just stuck until people stop using IE6 and CSS2 and 3 become standard?
