Repeating Background

Repeating Bacground problem

[arandlett]

I have a content div with a repeating background applied. The background will fill up the full size of the bg with just text in. However when I try to create a two column layout within the content div with a float the bg will go down as far as the left column. How do you fix this?

[vincevincevince]

You need to have a total of three DIVs, one for the background and two within it for the columns. Here's how I normally do it:

<div style="width:800px;background-image:url('background.png')">
 
<div style="float:left;width:200px;">Left Column</div>
 
<div style="float:left;width:600px;">Right Column</div>
 
<br style="clear:both">
 
</div>

The first div will be 800px wide and be whatever height is required to contain both the other two divs. This means what the height will match whichever is higher. The <br style="clear:both"> forces this behaviour.

The two floated divs inside have no background image of their own and so you can see through them to the main background image.

This is the standard technique for making your divs equal length - i.e. using the background image which contains the DIV border lines and colours to fake the effect.

Good luck!

[arandlett]

That did the trick thank you!