Fri, 2004-11-12 10:19
Hi !
I am trying to make a two-column layout webpage.
The first column displays menu and the second column displays content.
I am giving different background colors to both the columns.
Problem is that the content is generated dynamically and so the height of the column is not fixed.
While the height of the menu is very small (only 3-4 links)
So if the content on the content-column is more than 10 lines.. that columns heights gets bigger than the menu-coumn (that is, menu column does not automatically increases its size).
I am attaching an image-file to describe my problem. As you can see, the left column is much bigger than the right column in height.
The code I am using for the right column is:
#sidebar-a {
margin-top: 5px;
float: right;
width: 200px;
\width: 210px;
w\idth: 200px;
content:"";
display:block;
clear:both;
margin-left: 5px;
padding: 5px;
background-color: #DEDFD6;
}
The code for the left (content) column is:
#content {
margin-top: 5px;
padding: 5px;
margin-right: 215px;
background-color: #EFEFEF;
}
I'd really really appreciate your help.
Thanks !
Fri, 2004-11-12 13:22
#1
un-even height of two columns by css
there's not any way that i've been able to find that stretches the columns to fit, however, you can cheat fairly easily and make it look right 
. what you want to look at is possibly declaring a #content div that holds both columns. make this entire div the same background color as the shorter of the columns, that way, when the column doesn't reach the bottom, the background blends with it and appears to be continuing down the page...
<div id="content">
<div id="rightColumn">
<a href="#">Whatever</a>
</div>
<div id="mainColumn">
<p>All your content</p>
</div>
</div>
... then make sure your #content and #rightColumns have the same background color.
hope this helps!
You can't win, you can't lose, you can't break even. You can't even get out of the game!
Fri, 2004-11-12 17:45
#2
Maybe stupid, but ...
Fri, 2004-11-12 23:46
#3
un-even height of two columns by css
As already mentioned, having multiple columns of the same length regardless of content is illusion. Here is a very generic example using redundant bits of fakery.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator"
content="HTML Tidy for Linux/x86 (vers 1st March 2002), see www.w3.org" />
<meta name="editor" content="Emacs 21" />
<meta name="author" content="Gary Turner" />
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1" />
<title>2 Column - Apparent Equal Height</title>
<style type="text/css">
/*<![CDATA[*/
body {
padding: 0;
margin: 0;
font: 100% Tahoma, Helvetica, sans-serif;
color: black;
background-color: white;
text-align: center; /*IE centering hack*/
}
p {
font-size: 1em;
margin-bottom: 0;
}
h1, h2 {
text-align: center;
}
/*The background image should be the width of
the sidebar. Its purpose is to simulate a
column of full height.*/
#wrapper {
position: relative;
width: 650px;
margin: 0 auto; /*proper centering*/
text-align: left; /*return to normalcy*/
border: 1px dotted #333;
background: white url(sidebar.jpg) top left repeat-y;
}
#banner {
background-color: white;
border-bottom: 1px solid #555;
}
#sidebar {
float: left;
width: 150px;
padding: 0 5px;
border-right: 1px solid #555;
}
#main {
margin-left: 160px; /*adjust for overlap with sidebar border*/
border-left: 1px solid #555;
padding: 0 5px;
}
#footer {
font-size: 0.8em;
text-align: center;
margin-top: 0;
}
/* see http://www.positioniseverything.net/easyclearing.html
for explanation of next section */
.clearing:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearing {
display: inline-block;
}
/* hides from IE/Mac \*/
* html .clearing {
height: 1%;
}
.clearing {
display: block;
}
/* end hide from IE-Mac */
/*]]>*/
</style>
</head>
<body>
<div id="wrapper" class="clearing">
<div id="banner">
<h1>Generic Header</h1>
</div>
<!-- end banner -->
<div id="sidebar">
<h2>Menu</h2>
<ul>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
<p>The background image in #wrapper extends the full length of
the page. So, it looks like the column is full length.</p>
</div>
<!-- end sidebar -->
<div id="main">
<h2>Main Content</h2>
<p>The borders are set to overlap. If you know which column
will always be the longer, you may use only that column's
border. If you use color to separate the columns, the
background image in #wrapper should be total width of the float
column. Like the overlapping borders, this makes it appear that
both columns are full length.</p>
</div>
<!-- end main -->
</div>
<!-- end wrapper -->
<p id="footer">Footer Stuff © ® ™</p>
</body>
</html>cheers,
gary