Need help with equal length columns ...

[Jax2]

Hi all.

 

I used dreamweaver (ugh, I know) to create a simple liquid 3 column+header / footer css stylesheet.

 

I've edited it a bit and added/removed some parts that were either needed or not, but I'm running into a serious issue that I've tried to resolve in every way I could find suggestions on on the net.

 

My columns do not stretch all the way to the bottom.

 

Let me explain the situation first before you reply ...

 

The style sheet ends in .php so that the admin can change the background colors of the header/footer, sidebar 1/sidebar 2, and the main content in the center, as well as the background, which is working perfectly ... until they change the sidebars to a different color than the main content. At that point, whichever of the three (sidebar 1, main content, sidebar 2) is longest determines the bottom of the page. Usually, that is main content, but many times, main content is shorter than the right side bar, and the left side bar is always the shortest, which leads to a very ugly page in the end.

 

I need to figure out how to make each section equal the length of the longest section on any given page. I.e., if the right side bar is longest, the left sidebar will go all the way to the bottom instead of stopping where the content ends.

 

I was told to try putting a left border with transparent color on the main content, didn't help ... sidebar on left still ended at end of it's content.

 

I can't use faux columns because of the background color being able to be changed, plus, it's a liquid layout, so the widths change depending on the users resolution.

 

I am desperately seeking any advice on how I can fix this.

 

Thank you in advance, and if you need to see the css file for any reason, let me know.

 

[n000bie]

and if you need to see the css file for any reason, let me know.

 

That will be really nice

[n000bie]

You can check this

http://www.positioniseverything.net/articles/onetruelayout/equalheight

[Jax2]

Yep, I tried that one and it ended up giving me a page from hell that went down about  a mile

 

Here's a current copy of my css file:

 

<?php
include ("../includes/db.php");
$sql="select * from ".$prefix."configure";
$result=mysql_query($sql, $db);
	while ($row=mysql_fetch_array($result))
{
?>
body  {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #<?php echo $row['background_color'];?>;
background-image:url('../images/<?php echo $row['background_image'];?>'); 
margin: 0; 
padding: 0;
text-align: center;
color: #<?php echo $row['Text_color'];?>;
}
.thrColLiqHdr #container { 
width: 90%;  /* this will create a container 80% of the browser width */
background: #<?php echo $row['MainBody_color'];?>;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
} 
.thrColLiqHdr #header { 
background: #<?php echo $row['HeaderFooter_color'];?>; 
padding: 0 10px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
border-bottom-style: thin; 
border-bottom-color: black;
border-bottom-style: solid;
border-bottom-width: 1px;
height: 150px; 
} 
.thrColLiqHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
font-style:italic;

}

.thrColLiqHdr #sidebar1 {
float: left;
width: 220px;
background: #<?php echo $row['sidebars_color'];?>;
padding: 15px 0;
margin: 5px o;

}
.thrColLiqHdr #sidebar2 {
float: right;
width: 23%;
background: #<?php echo $row['sidebars_color'];?>;
padding: 15px 0;


.thrColLiqHdr #sidebar1 p, .thrColLiqHdr #sidebar1 h3, .thrColLiqHdr #sidebar2 p, .thrColLiqHdr #sidebar2 h3 {
margin-left: 10px; 
margin-right: 10px;
}

.thrColLiqHdr #mainContent { 
margin: 0 24% 0 23.5%;
background: #<?php echo $row['MainBody_color'];?>;
border-left-style: solid;
border-color:transparent;

}


.thrColLiqHdr #footer { 
padding: 0 10px;
background:#<?php echo $row['HeaderFooter_color'];?>;
border-top-style: thin; 
border-top-color: black;
border-top-style: solid;
border-top-width: 1px; 
} 
.thrColLiqHdr #footer p {
margin: 0; 
padding: 10px 0;
}

}
#members {
width: 95%;
padding: 10px;
float: left;
margin-top: 1px;
}
#members a:link, #members a:visited, #members a:hover {
text-decoration: none;
}
#nav {
width: 85%;
padding: 10px;
margin-top: 1px;
float: left;
}
#nav li a#current
{
border-bottom: 3px solid #DAD6B7;
background: #<?php echo $row['sidebars_color'];?>;
} 
#nav a:hover
{
background-color: #<?php echo $row['menumouseon'];?>;
color: #00000;
} 
#nav a:link, #nav a:visited #menu1 a:visited
{
color: #000000;
text-decoration: none;
} 
#nav a
{
color: #000000;
text-decoration: none;
font-size: 14px;
display: block;
padding: 3px;
width: 160px;
background-color: #<?php echo $row['sidebars_color'];?>;
border-bottom: 1px solid #eee;
} 
#nav ul
{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
} 
#nave li
{
display: inline;
/* for IE5 and IE6 */
} 

.fltrt { 
float: right;
margin-left: 8px;
}
.fltlft { 
float: left;
margin-right: 8px;
}
.clearfloat { 
clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

#usermenu {
width: 100%;
float: left;
}
#usermenu ul {
list-style: none;
margin: 0;
padding: 0;
width: 7em;
float: left;
}
#usermenu a, #usermenu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#usermenu h2 {
color: #000;
background: #<?php echo $row['menumouseon'];?>;
text-transform: uppercase;
}

#usermenu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#usermenu a:hover {
color: #a00;
background: #fff;
}
#usermenu li {position: relative;}

#usermenu ul ul {
position: absolute;
z-index: 500;
}

#usermenu ul ul ul {
top: 0;
left: 100%;
}

div#usermenu ul ul,
div#usermenu ul li:hover ul ul,
div#usermenu ul ul li:hover ul ul
{display: none;}

div#usermenu ul li:hover ul,
div#usermenu ul ul li:hover ul,
div#usermenu ul ul ul li:hover ul
{display: block;}
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#usermenu ul li {float: left; width: 100%;}
#usermenu ul li a {height: 1%;} 

#usermenu a, #usermenu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->

<?php
};
?>

[haku]

http://www.addedbytes.com/articles/faux-columns-for-liquid-layouts/