Column help

[Petron]

I am currently developing a website with a center section that works like a blog. There is a short section of an article that you can read, if you click 'view more' the entire article is shown. This is programmed using java script. I have links on each side of that center blog. I wish to have to columns under my links that continue to the bottom of the page, and then they would meet a footer. My problem, is that I don't know how to make the columns shrink or grow longer the match the state of the center column. My site is based on div boxes. If anyone has any ideas, they would be greatly appreciated!

[matt.ritter]

There are many ways to handle equal length columns with css.


The simplest (and therefor most stable) way I have found is to make a vertically tiling background image in a div that contains each of the other divs.

[Petron]

I can do that, the problem is that I don't know how to make the columns extend to the right length, because of the show/hide article button that I have.

[ryanbutler]

With the background tiling technique, you don't need to worry about how high each column is. As content is added or removed, the image will compensate for it. All you do is create a wrapper image in an image editor that matches the width of your three columns and nest inside that the code for your three columns. When the link is clicked to show the article, the content will expand to meet the equal heights of each column.

I wrote an article about it here:

http://midwestwebdesign.net/tutorials/csslayout/index.php

[Petron]

The column that has to adjust is not the column with the text in it. One column has adjusting text, and I want the other to extend to match it. They are both inside a parent div layer.

[Centauri]

What Ryan is saying is you don't try to make the columns match the same length, but rather make it look like they do. A vertically repeating background graphic on the parent div creates the illusion of full length columns - as long as any column is capable of expanding the container, it will look like they all do. The faux column (http://alistapart.com/articles/fauxcolumns) technique.

[Petron]

That is great, and really close to what I am looking for, except I can't use absolute positioning, it has to be relative, and I can't have the column go the entire length of the page. It has to start at the bottom of the links, and then stop at the bottom of the blog area. Here is the site www.ScottTornquist.com (I am not Scott Tornquist)

[ryanbutler]

Why does it have to be relative positioning? Relative positioning doesn't move any of the elements physically, just the view ports. You'll have a extremely difficult time trying to predict heights and you shouldn't try anyway unless you know precisely what they'll be. However, I don't understand your last sentence.

[Petron]

It has to be relative because I need the columns to adjust to each other, because I need to be able to add and remove aspects of the various columns regularly. If I change the columns to absolute, they then overlap each other.

[ryanbutler]

They'll adjust to each other if you float them which would be the better option here. Does each column have a unique background color? If so, go into a(n) image editor, create a rectangle image with a width equal to that of the total width of your layout. Then each column will be contained as one image. Then float each column to the left specifying the width through CSS. So you'd have:

HTML:

<div id="wrapper">
<div id="header">

</div>
<div id="left">

</div>
<div id="middle">

</div>
<div id="right">

</div>
</div>

Then the CSS:

#wrapper{
background-image:url(mybackgroundimage.jpg);
background-repeat:repeat-y;
}

#left{
float:left;
width:adjust_to_suit;
}

#middle{
float:left;
width:adjust_to_suit;
}

#right{
float:left;
width:adjust_to_suit;
}

From there, each column will adjust with each other and there'll be no overlap.

[Petron]

I did that, and it didn't work. Is adjust to suit a command or is it just what you put there, for me to replace?

[Centauri]

The columns are currently floated, left and centre floated left, and right floated right. They do have relative position applied, but I cannot see any purpose for this - relative positioning is used to either nudge an element a bit from its natural position, or to provide a reference for absolutely positioned contents, and I don't think either apply here. There is probably no need for the contents of each column to be floated individually either.

Petron, can you post a pic of exaclty what you want the side columns to look like when extended? - I'm not real sure on the intended column background colour / border look.