Help with three column fixed width layout equal column height specific issue

HTML & CSS
1

Hi guys - I’m having a really difficult time trying to create a three column fixed layout, where all three columns have equal height.

First of all I had a pretty nice looking layout that I made using Dreamweaver. It was complete with the spry horizontal menubar, but unfortunately I could not for the life of me get the right column to have the same height as the other two.

I tried using 100% height for the columns, but I guess there is an issue if they’re floated.

I found a workaround example online where two extra divs are created with the same background color as two of the columns and somehow this helps… the problem is when I try to use Dreamweaver to add the spry menu bar it breaks the layout, also it doesn’t allow me to use the same transparent divs as I had in my original layout, since we are using a hack using extra divs with the same background colors.

My layout is to have three columns, and include a header and footer. The header itself will be divided into three rows, the topmost being transparent showing the page background color. The bottommost being the container for the spry, or other, horizontal menu bar.

Each column show be equal height, which means all column heights should match the height of the longest of the three columns.

The one hack that I found as I said used additional divs to make it look good, but the way that hack works does not allow me to keep my transparent header. Furthermore even if I disregarded that, the spry menu kept breaking the layout and I couldn’t seem to get it to not break with the menu addition.

If someone can refer me to a post that I missed or any links, tips, etc. It would be greatly appreciated! I’ve been researching this since this morning and it’s 5pm now. Thanks in advance!

2

First you must understand CSS doesn’t naturally do equal height, like tables would. There are versions in the works that will allow for this, but for now your best bet, since its a fixed with layout could be to use “faux colums”. That is your PARENT layer contains a vertically repeating graphic of your columns… That is the easiest way to do it.

The other thing I would suggest, tho I dont actually understand what you are trying to achieve with a columnated header… would be to try the multiple column with divs… TWICE… once for the header the other for the header

3

Hi Welcome to Sitepoint :slight_smile:

First of all I should point you to the css faq (see link in my sig) which will explain why you can’t use 100% height in that way.

As Dresden said above the easiest way to make equal columns is with the faux column approach. You should still be able to have transparent parts show through in the gaps as long as you have made the space in the faux image transparent.

You can do it without images but it needs a good understanding of css. Here’s an example (you can [URL=“http://www.pmob.co.uk/search-this/absolute-columns3-hide.htm”]read up on the technique here).

If your issues with DW are related to using it in design view then DW does not handle css very well art all in design view and you should work in code view and the preview in a browser for best results.

If you want to apply something like the spry through the design view interface then do it on a separate page first and then copy it into the real page. However, you really should ditch design view as it hardly ever does what you want. Just work in code view.