View Full Version : Need to make equal columns in a template design

02-24-2011, 06:07 PM
I'm going to try to be as concise and informative as possible.

I build templates that have to flow around whatever our clients put in. I can't use set heights. I was taught, by the company, to build tables, but in the last two years have been working to move us to CSS styling. (As I teach myself how to do it at the same time.)

I have a template that we made live that needed an equalheights jquery plugin to make the columns work. However, we recently discovered that the page is broken when the "Additional Search Criteria" is clicked as it opens up an additional area and the page doesn't adjust for it.

You can see the live example here:

On our dev site, I have tried to change things so that the page works with CSS alone and without using the plugin. However, I can't get the columns to fill the space correctly. (Which is why I went looking for an answer and came up with the plugin.)

Broken Page: http://dev.pahomesforsale.com/login/

I have gone to several people and have not been able to get help. I've tried to fix this problem for 4 days, searching for suggestions and trying different tactics. I'd really love a way to make this page work with just CSS. And since the client has already approved the design (and so far does not know about the bug) I can't do a redesign.

Thanks for your help.

02-24-2011, 06:48 PM
hmm when I remove the fixed height for inside_container div, then it seems to work. Have you tried and tested that?

02-24-2011, 10:05 PM
Do you mean inside_content? That does not have a fixed height in the CSS.
I'm not seeing it in the html either. Can you clarify?

margin: 0;

02-24-2011, 10:09 PM
Its an inline style you specified:

<div class="columns" id="inside_content" style="height: 750px;"><div style="margin: 10px;">

That works as far as fixing your box model issue, but I think it causes another issue. Try it and see what happens.

02-24-2011, 10:31 PM
If you're looking for a pure css solution to setting equal column heights, there are some really good examples (http://www.pmob.co.uk/pob/equal-columns.htm) here.

If you want a javascript soultion to setting equal column heights, I use this as a model.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none}
#container {
border: 1px solid red;
width: 800px;
overflow: hidden;
margin: 0px auto 0px auto;
padding: 20px 20px 20px 20px}
/* sidebar's and content's top and bottom padding values must be the same */
#sidebar {
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
border: 1px solid green;
float: left;
width: 250px}
#content {
margin: 0px 0px 10px 0px;
padding: 10px 10px 10px 10px;
border: 1px solid blue;
float: right;
width: 490px}
#content div {
margin: 0px 0px 0px 0px;
padding: 0px 0px 70px 0px;
<script type="text/javascript">
window.onload=function() {
var maxHeight = 0;
//get the column containers
var colsA = document.getElementById("container").childNodes;
//get the height of the tallest column
for(var i=0; i < colsA.length; i=i+1) {
if(colsA[i].clientHeight > maxHeight) maxHeight = colsA[i].clientHeight;
//set all the column containers heights to maxHeight
for(var i=0; i < colsA.length; i=i+1) {
if(colsA[i].nodeType == 1) colsA[i].style.height = maxHeight+'px';
<div id="container">
<div id="sidebar">
<ul id="menu_list">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<div id="content">
Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel.
Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce
pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut,
ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id,
aliquam non, taciti donec ut. Risus integer hymenaeos velit, nisl suspendisse sollicitudin ut, sed tempor sagittis curae dolor,
volutpat massa ut sagittis. Voluptatem a enim, lobortis lectus volutpat, vitae vero diam purus morbi class, tristique donec
ante sed, ac turpis dis dui vestibulum aut.

02-24-2011, 10:56 PM
Are you looking at the www version or the dev one?
The plugin puts a height on these areas after the page loads.

The actual code looks like this:

<div id="inside_content" class="columns">
<div style="margin: 10px;"><xsl:apply-templates select="page"/></div>

02-24-2011, 11:00 PM
I'll be reading through the CSS options.

As to the javascript solution, I know very little about java script, but will it adjust the page is something opens and the page becomes longer after the page has loaded?

02-25-2011, 02:52 PM
Are you looking at the www version or the dev one?
The plugin puts a height on these areas after the page loads.

The actual code looks like this:

<div id="inside_content" class="columns">
<div style="margin: 10px;"><xsl:apply-templates select="page"/></div>

I'm looking at your source code the browser renders. True, the jQuery plugin may be adding that height attribute to your div.

Have you looked through the jQuery code then? This may be a topic for the jQuery/javascript forum.

02-25-2011, 04:10 PM
I was referring to the fact that I pasted two links. One with a www address which is the live site.

The page on our development server has this address: http://dev.pahomesforsale.com/login/

This dev one is not using the plugin and I was hoping to fix this with just css so that I don't have to use the plugin.

As for looking through the jquery code, I have looked through it in a general way, but I know very little about jquery. Unfortunately, the only way I can think of to change things would be to alter the way the search page functions. (So that when you click the link, it runs the equalheights plugin again.) This is not something my developers would want me to do.

I really appreciate your reviewing the issue for me.

03-01-2011, 03:56 PM
Thanks Bullant!
I'd been set on the idea of making the two columns with background colors rather than images (as I have been working to limit the number of images our templates call). But looking over your examples, made me see that I could have a small image with the two background colors for the content_area, and then use no background for the navigation and the content.

Once I changed how I thought about the area, the solution seemed so simple.