hello;

I'm sure this question has been asked before, but I couldn't find it on here. Sorry.

Does anyone know how I can get my CSS columns (boxes) to be the same length on the page, regardless of the content within the box. Please take a look at a website I'm working on www.irisheyesareflying.com/devsite. Notice how the left navigation and the content to the right do not line up at the bottom. How can I get them to line up?

Thanks so much for any help you can give me on this. I've been struggling with this little issue for 2 days now!

Oh, I've tried to use the faux columns method, but couldn't get that to work. Maybe I did something wrong? Anyway, here's the CSS I'm using:


/* Layout Stylesheet */


body{
background: #006633;
color: #333333;
}

#header{
position: absolute;
top: 10px;
left: 20px;
width: 720px;
border: 2px solid #000000;
background: #c0c0c0;
color: #333333;
margin: 0px 0px;
padding: 0px 0px;
height: 144px;
; clip: rect( )
}

#navbar{
width: 180px;
border: solid;
background: #66CC66 url(none);
color: #333333;
; clip: rect( )
; border-color: #000000 solid #000000 #000000
; visibility: inherit
; vertical-align: top
; top: 156px
; left: 21px
; border-width: 0px 0px 2px 2px
}

#content{
width: 500px;
border: 2px solid;
background: #ffffcc;
color: #333333;
padding: 20px 20px;
; clip: rect( ); left: 180px
; border-color: #000000 solid
; visibility: inherit
; position: absolute
; top: 0px
; height: 100%
; z-index: auto
}
#container { background-color: #CC00CC; clip: rect( ); position: relative; visibility: visible; height: 100%; width: 720px; top: 140px; left: 10px; z-index: auto}

Note: I was trying to put the navbar and content within the container, but I must not have done that right?

Thanks again

Nest the short column(#navbar) inside the longer column (#content).

Remove the height:100% form the longer column so that the long column is the height of it's contents or else set the long columns hight to a px value that is always higher than the content of the column.

Set the height of the short column to 100%. It will then have the height of the longer column.

Use a negative left style (e.g. left:-200px) to position the short column to the left of the longer column.

Forget about the #container.

I saw something about this once, never tried it so no guarantee it'll work.
One way was to set
body { height: 100% }
the basis of this being the body isn't usually the height of the browser window, it also grows with content.

The other was to 'fake' your coloum using other tequeniques, like using a repeated background pattern on the page.

Or you could mess around with Javascript.....