Multi Column Design

Now, more than ever, multi column design is becoming popular. I don't really know how to efficiently code mutli column. Here are the three types I have experimented with:

• Tables - Horrible thing to do and I never use them.
• Float - Up until recently I was using float but it become really difficult getting the background color to work in both IE and FF because one column is always shorter, exposing the white background.
• Position:Absolute - This is what I am currently trying to use and it is just as hard as float. I can't seem to get anything to align below it because it is absolutely positioned. However, if I want a footer I want it to be fluid and move up and down with each page and not be absolute.

What do you guys use? I am currently having problems using position and getting the footer to work...

http://ppacinc.org/ is the site I am trying to work on. Any help would be greatly appreciated.

Most of the time I use float. If you have a short side column and you want it's background to expand, you should make a container div and give that a background colour or image.

Here are to resources for CSS Layouts
http://www.glish.com/css/
http://www.bluerobot.com/web/layouts/
As Bas said you have to use "wrapper" div.

To get backgrounds to "stretch" the full length of the columns you have to use repeating images.

Originally Posted by Julian To get backgrounds to "stretch" the full length of the columns you have to use repeating images.

I think he is failing to clear his floats, thus ending them at the end of content, rather then terminating at the footer.

Correct?

i use float most of the time, and wrap them in a parent div and set the bg of that to the color i need, or if they are different colored boxes, i just set there height to 100% and it fills in the bottom so it doesnt just stop.

Originally Posted by SilverSpike i use float most of the time, and wrap them in a parent div and set the bg of that to the color i need, or if they are different colored boxes, i just set there height to 100% and it fills in the bottom so it doesnt just stop.

Height: 100%; is pretty much useless. You need to clear your floats correctly.

<br clear="all" /> at the end of all your floating elements. It should fix that.

Originally Posted by AndrewR <br clear="all" /> at the end of all your floating elements. It should fix that.

Who tought you

I use the float method. Floating multiple DIVs in a container, and then set a background to the container DIV to make sure that the columns appear to stretch fully to improve asthetics.