CSS three column layout

Can you make <img> resize in flexible "#centercontent"?

[Birdman]

I'm now experimenting with the "holy grail" three column layout. I like it except for the fact that I can't get the centercontent logo to shrink with the text. It stays the same size and layers over rightcontent. Is it possible to make the logo resize proportionately with the text area?
Thanks!
<added>
Also, I tried using separate background images for left and right so thier respective content stays in it's background. I just can't seem to make the bg stretch to bottom of page when center content is longer than right or left.

[edited by: Birdman at 4:20 pm (utc) on June 3, 2002]

[Nick_W]

I've never tried resizing an img with css, I never thought it possible.

One thing to try though would be to give that image a margin: then it shouldn't overlap anything.

Or is this a bg img? I'm not clear.

Nick

[Birdman]

Hello again Nick_W. Thanks again Nick_W! The img I wanted to "shrink" was the top logo in the center column. The center column margins are set so that when the window gets smaller the left and right columns keep original sizes and center column takes what's left in the middle. The text renders fine, but the logo gets overlapped by the right column. If I made the logo a background of its own "div" in the center(at the top), would it then reduce in size. If it won't work I'll try something else. Basically, I wanted the center logo to blend with the background colors of left and right columns, with a gradient effect in center. Maybe I'm just nuts, who knows. Thank you WW!

[Nick_W]

Well, why not put margins just around the image? Or am I missing the point?

#logo {
margin: 1em;
}

Nick

[antidote]

I'm not sure if it will work in your situation, but try this:

#logo {
z-index: 1;
}

typos, typos...
[edited by: antidote at 8:57 pm (utc) on June 3, 2002]

[edited by: antidote at 8:58 pm (utc) on June 3, 2002]

[papabaer]

Hello Birdman, since your fixed-size logo resides in your "liquid" center <div> there are only a few options available: The first would be to resize your logo to a smaller version which would allow more free window resizing before any overlap. You can even place your logo in a "nested" <div> that has a similar background color or scheme as your logo. The actual graphic may only be 200px wide, but the styled <div> can remain liquid and appear as part of the logo itself. You can even add a background image to the logo <div> to enhance this effect.

The second option would be to make your logo as part of the center <div> background initially. This way when your page gets scrunched down to a miniscule width, the only thing to worry about is text wrap. If someone is squishing a page down that narrow to begin with, graphics are not their priority. Good planning when creating your background image will ensure that it retains maximum visibilty at all but the very narrowest dimensions. Then simply use padding within the div to maintain text spacing so your logo and following text appear as natural page flow.

Hope this give you some viable options!
- papabaer

[edited by: papabaer at 9:13 pm (utc) on June 3, 2002]