Div div div div div div div div div div div div div div div

[Hitman]

So, I have 2 divs. First one is a container, second one contains some content. When I write in the one with content, they both expand - however the container is going to be a bit taller/higher than the one with content: BUT I need the one with content to be 100% of the height of the first container.

Example:



I want to second, smaller div to be 100% of the height of the container, so there is no gap where the red arrow is.

I will buy the first person to give me the correct code 1 month donator, whatever colour they choose (SMS ones only).

Thanks.

[Kieran]

Post your code please.

[MattFr]

There's a hacky way round it, but I don't like that. The best thing to do is give the container a background image that repeat-y 's for both of them. That makes it look like both boxes are expanding downwards together, even though they are not.

[Hitman]

Well could somebody give me whatever would be needed from scratch? What I have at the moment is very big, jumbled at ugly. If it could be explained as two simple divs (like in the picture) I'd appreciate it.

[MattFr]

<div id="wrap">
    <div id="left">
        Left Content
    </div>
    
    <div id="right">
        Right Content
    </div>
    
    <div class="clear"></div>
</div>

#wrap
{
    width: 800px;
    background: url(background.png) repeat-y;
}

#left
{
    float: left;
    width: 600px;
}

#right
{
    float: right;
    width: 200px;
}

.clear
{
    clear: both;
}

Then background.png would be a 600px wide box next to a 200px wide box. As both content boxes (left and right) expand downwards, the #wrap also expands downwards, thus extending the wrap background, making it look as if both boxes are expanding together. Understand?

[Hitman]

Ah I see, I understand what you mean, took me 10 minutes to get it. I'll give that a try and see how it comes out. So the background is an 800px wide image, the first 600px are clear (as I want the first box clear) and the next lot are dark (as I want them dark).

[MattFr]

Yep, you got it.

[Hitman]

Bingo, it works! Excellent! Sent you a visitor message regarding donator!