PDA

View Full Version : Div div div div div div div div div div div div div div div



Hitman
06-06-2010, 02:53 PM
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:

http://i50.tinypic.com/156bdki.png

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
06-06-2010, 02:55 PM
Post your code please.

MattFr
06-06-2010, 02:59 PM
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
06-06-2010, 03:00 PM
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
06-06-2010, 03:04 PM
<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
06-06-2010, 03:21 PM
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
06-06-2010, 03:21 PM
Yep, you got it.

Hitman
06-06-2010, 03:27 PM
Bingo, it works! Excellent! Sent you a visitor message regarding donator!

Want to hide these adverts? Register an account for free!