Can't seem to get this figured out. I need to have two equal length columns that are split with a 5px space/transparent border between them and the sites gradient background image needs to show through the split.

No I have no problems making the columns and showing the background between them but can't get them to expand to equal lengths.

I also need this to be simple and not like some of the crazy hacks I've found that need to be done to achieve the look that I need. I'd rather redesign the content/navigation columns or go with a simple table if it can't be done easily.

Here's a mock up of what I need to do.

http://www.halimage.com/example.png

Thanks

HTML:


<div id="wrapper">

<div id="left">

</div>

<div id="right">

</div>

</div>

CSS:


#wrapper { width: 905px; margin: 0 auto; }
#left { width: 660px; background: white; height: 750px; float: left; }
#right { width: 235px; background: white; height: 750px; float: right; }

;6643475']HTML:


<div id="wrapper">

<div id="left">

</div>

<div id="right">

</div>

</div>

CSS:


#wrapper { width: 905px; margin: 0 auto; }
#left { width: 660px; background: white; height: 750px; float: left; }
#right { width: 235px; background: white; height: 750px; float: right; }

I already have that and I used a transpatrent border to get the separation between the two columns but once the displayed data reaches the 750px height its gets cut off.

If I have for now I'll stick to a simple two column table for now.

I already have that and I used a transpatrent border to get the separation between the two columns but once the displayed data reaches the 750px height its gets cut off.

set overflow-y: scroll;

set overflow-y: scroll;

That will just create a scrollbar, I think he wants it to expand.

Don't set a fixed height and it will expand when you add content.

;6643525']That will just create a scrollbar, I think he wants it to expand.

Don't set a fixed height and it will expand when you add content.

Tired that but the columns don't expand when the opposite column gets longer than the other one. I can still possibly live with that as its simple to code but just doesn't look as neat as two equal length columns.

Here's what'll happen

http://www.halimage.com/example2.png

Oh, he wants the column to the right to be the same height as the left if there is more content in the left column.

Put those two columns in a container DIV, one of the containers is going to HAVE to have absolute height.

After you put those two in a container div, just set height:100%;

Like I said, one of them is going to have to have absolute height, so the container div in this case will be the one with the height.

Tired that but the columns don't expand when the opposite column gets longer than the other one. I can still possibly live with that as its simple to code but just doesn't look as neat as two equal length columns.

Here's what'll happen

http://www.halimage.com/example2.png


That can probably be done with JS but if I were you I would give the sidebar a fixed height to match the expanded content area.

Oh, he wants the column to the right to be the same height as the left if there is more content in the left column.

Put those two columns in a container DIV, one of the containers is going to HAVE to have absolute height.

After you put those two in a container div, just set height:100%;

Like I said, one of them is going to have to have absolute height, so the container div in this case will be the one with the height.

Yah, should have been more clear but after reading and reading all day for nice and neat example my brain doesn't want to write clearly.

Old thread but anymore ideas? Seems using JS is the only way to do this or tables.

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks is the way to really do it, but http://www.alistapart.com/articles/fauxcolumns/ gets much the same effect with much less work.

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks is the way to really do it, but http://www.alistapart.com/articles/fauxcolumns/ gets much the same effect with much less work.

Yah I found the first a few years back so those two seems are the only way with out being tied to JS.

Actually I don't think those methods will work at least the faux column one as I want a gray 4px border around the content and navigation/block box.

If you need a border, it should be trivial enough to include it in the background image (if using faux columns) or just specify the border (if using Matt Taylor's solution).

If you need a border, it should be trivial enough to include it in the background image (if using faux columns) or just specify the border (if using Matt Taylor's solution).

Well this is the border that I'm thinking about. I pretty sure this can't be done with faux column background.

It might be possible with the multiple container example but would look like a lot of redundant containers.

Here's what I'm looking for

http://www.halimage.com/example3.png