CSS problem

[yilduz]

Okay, this one is starting to bug me.

I have a div which is being used as a container. The div contains three other divs, all side-by-side. The three divs need to be the same height, always. They also need to be able to change in height, depending on the amount of content in them. So, if one div has a lot of content, it has to stretch to fit the content. The other two divs also have to stretch to match its height, so they always stay the same.

I found a way using overflow:hidden; on the container. I then added margin-bottom: really high number; and padding-bottom: really high negative number; on the three divs. It actually worked how I wanted, but with one problem.

The three divs have a background image, aligned to the bottom. When I go with that method, the bottoms of those divs are actually thousands of pixels down into nothingness, hidden by the overflow:hidden. Therefore, they're not seen.

Is there a way I can do this?

 

[dmi]

Off the top of my head...

Just erase the 'height' from all three divs that are in the container. It will handle the height as automatic - meaning that it will stretch them as much as needed (or put height: auto, it's the same).

 

[yilduz]

Off the top of my head...

Just erase the 'height' from all three divs that are in the container. It will handle the height as automatic - meaning that it will stretch them as much as needed (or put height: auto, it's the same).

It'll stretch them individually, but they need to be the same height, always.

 

[dmi]

You want to fix their height, but also you want them to be relative.

Good luck with that. Sorry, I can't think of anything at the moment.

 

[yilduz]

You want to fix their height, but also you want them to be relative.

Good luck with that. Sorry, I can't think of anything at the moment.

It doesn't need to be fixed, the three just always need to be the same.
Maybe it's something I'll need to do with a code that allows me to use variables.

 

[deleted984054565403]

Dennis,

You might want to try using the faux columns method.

Create a background image that mimics the style of the left and right columns and set it as the background of the container. Float the three divs inside the container as you normally would.

 

[yilduz]

Dennis,

You might want to try using the faux columns method.

Create a background image that mimics the style of the left and right columns and set it as the background of the container. Float the three divs inside the container as you normally would.

I was thinking of doing that, but the three divs have a different background color than the container, so the background color for those divs would cover the background image if in the container.

 

[deleted984054565403]

I was thinking of doing that, but the three divs have a different background color than the container, so the background color for those divs would cover the background image if in the container.

Maybe you could try making another container inside the main container.

<div id="container">

<div id="main">
<div id="leftcol">
</div>
<div id="midcol">
</div>
<div id="rightcol">
</div>
</div>

</div>

 

[yilduz]

but the background color of the three divs would still cover the background image in the container.

 

[deleted984054565403]

but the background color of the three divs would still cover the background image in the container.

Have you considered using GIF or PNG transparency for the "fake column" background image?

My apologies for the awful-looking illustration. :red:

 

[yilduz]

I think I see what you're saying, but my particular situation doesn't work with that, I think. That is, if I'm understanding what you mean.

The problem is that the container has one background color, the three divs have another background color, and there is also a background image at the bottom of each of the three divs.

...unless...

That's what you meant by having a background image on the container. I can just make a 1 px tall image going the span of the container background from left to right, then repeat it down, and then just cover it with the background image on the bottom of the divs. That would work! I think.

Thank you, Steve! Your illustration helped me greatly!

I'll see if it works.

edit: gah, I still have the problem with the height of the three divs. In this way, the bottom of the three divs is still at the bottom of the column's respective content, or way below with overflow:hidden.

...unless...

That's what you meant about having two container divs. Put the 1 pixel high background on the one behind and then the bottom background image spanning the width on the second one.

I think that'll work. I'll try it.

edit2: Well, no... because when the three divs stretch way down, it stretches the container divs so you still don't see the bottom.

...unless...

um... nope, I can't think of anything else. I'll just go with plan d. It's very, very similar. In fact, same idea, just implemented in a slightly lower spot, which is fine. It'll work.

Thanks for the ideas and help.

edit3: wow, i'm dumb. It should work. I must have forgotten to take something out because if i do that with two containers, i shouldn't need to use the overflow:hidden and all the bottom margin and padding nonsense.
I'll try again.