7 replies to this topic

[ttwblb]

Building a new site without using tables for layout. Old news to some, right? But there is one thing I have not been able to do that is easy to do with tables. Imagine the usual web page layout, left side nav column, right side content column. The height of the content column varies as the amount of content, and text size, varies.

Objective: have a repeating background graphic fill the space in the left side column below the nav links at the top of that column. The background needs to fill the nav column down to the level of the bottom of the content in the right side column.

Problem: in a div a repeating background won't show unless there is content in the column for it to repeat behind. So since the nav links in the left column end long before the text content ends in the right column, the left column background doesn't show.

How to force a background to repeat in a div when there is not enought content to fill the height of the div? Setting a div height in the div style doesn't do it.

Thanks.

[Ron Carnell]

Try a search for css faux columns and see if that helps.

[chrishirst]

<self-promo>

Have a look at same height columns

</self promo>

[ttwblb]

Thanks Ron and chrishirst for your replies. I reviewed both techniques. The "Same Height Columns" coding is over my head. The "Faux Columns" approach doesn't apply to the page layout I'm dealing with. My design is centered, and I'm trying to get a background image to repeat all the way to the bottom of a left side column, when the content of that column is much shorter than the content of the central main text area column.

I would be interested in hiring someone to solve the problem I am struggling with. If either of you are interested, please email me with your rates and availability. I need assistance right away. I could email you all the files I'm working with and you can work on them.

Thank you.

[chrishirst]

would something like this work?
Work in progress, OK in FF and IE, needs a bit of work for Opera

uses conditional comments and CSS expressions to get the left and right columns to fill vertically. It can be soon tweaked for a single column.

[ttwblb]

Thanks chrishirst, I'll view the source and try to figure it out. I'm on a Mac (though of course I always test in Win browsers) and right away I noticed that the page you linked to does not show the background in Mac Safari, though it does in Mac Firefox.

Thanks.

[ttwblb]

Still searching Google for CSS solutions, I came upon this one It involves using a large negative bottom padding value, and then an equal positive bottom margin value, then hide the overflow. Kind of bizarre:

" add a large bottom padding value to force the background of the shorter columns beyond the height of the longest column of content. The size of this padding is totally arbitrary. We just need to make sure it's enough to take account of the difference in content between columns. Next we trick the browser into thinking the columns are still only as high as the content they contain by applying an equal sized but negative bottom margin. Finally we add a rule to the container to hide the overflow created by the padding value."

Amazingly, this seems to work...sort of. Here is the page I am working on. This is all done with div containers, no tables are used. Below the left side navigation there is a repeating background in that column. The repeating background graphic is 53 pixels high and is designed to tile seamlessly on the vertical axis, but for some reason there is a discontinuity in the tiling appearance at about 688 pixels from the top of the tiled area (top of the left side nav column). I don't know why it's doing that. I see it in all my Win and Mac browsers.

But at least the background extends to the bottom of the left side column!

[ttwblb]

I think I finally have this weird method of getting equal height div columns with a full background working. See here. It works best in Windows browsers, in Mac browsers one has to specify the bottom padding and corresponding bottom negative margin to a certain value to get the lower edge of the background to go down to an exact spot (the overflow: hidden; rule doesn't seem to stop overflow in Mac browsers) but I can live with that.

Really a strange solution!