3 replies [Last post]
mollita
Offline
newbie
Last seen: 15 years 26 weeks ago
Joined: 2006-06-01
Posts: 2
Points: 0

This is an "is it possible" type question, because I haven't found a working example of what I'm trying to do.

I am trying to create a three column layout where the background images in the left and right-hand columns determine the height of those columns. I want the columns to be of equal height (regardless of the text they contain) and to run from about 100px to 400px on the y axis of the page. Sort of a visual block that bookends the longer center column. It pushes the center column forward, visually, which I like. (see goofy diagram, below)
__________

xx | | xx
xx | | xx
__| |____

I don't want the faux-technique where the image tiles to the height of the longest column, because I want the left and right columns (the x's) to be of equal length no matter their content (and shorter than the center column).

I have tried nesting divs where the parent div holds the background image with height and width specified. It doesn't work. The image shrinks to the size of the nested nav div.

Thanks in advance for any advice or pointers to further reading.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

3 col nav: Can you force vertical alignment with bg images?

Sounds like you want to use min-height on the left and right columns. IE < 7 doesn't recognise min-height so you use height instead and feed it to IE using a hack or conditional comments.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

mollita
Offline
newbie
Last seen: 15 years 26 weeks ago
Joined: 2006-06-01
Posts: 2
Points: 0

3 col nav: Can you force vertical alignment with bg images?

Thanks, Tyssen, for the great help-- directing me to min-height.

I haven't picked a hack yet (there are so _many_ for min-height for IE). I want to make sure it works on Firefox, first-- and so far I'm getting a shift that I can't figure out, and if I can't make it work w/ FF, I won't need the hack.

Here's a link to two versions of the html and the CSS. http://www.zackcourtney.com/test/cssforum.html

The first is without nesting (and min-height). The right boxes is longer.

The second version has nesting divs and the boxes shifted even more.

Any advice is deeply appreciated.

Thanks again.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

3 col nav: Can you force vertical alignment with bg images?

For the first version the box on the right is longer because it has different padding from the first. Also, I'd take a look at http://css-discuss.incutio.com/?page=ThreeColumnLayouts for better ways to construct 3-column layouts using floats because what you've got now is going to run into troubles (particularly in IE) when the window and/or text is resized.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference