I am trying to make collumns by first using a div to collect them all and place a background image that will make dividers for the columns. The problem is that it will only show a little of the picture that is the divider. unless i have the content inside the main div outside of their own classes. My goal is to have the height of the main div set automatically, same with the classes inside it. Here is my style

.gamecol {           
	float:left;     
	width:150px;
}

#col {
	background:url('col bg.png');
	width:475px;	
	padding-right:10px;
	height:auto;
	background-repeat: repeat;
	margin-right:auto;
	margin-left:auto;
}

I atached a screenshot. If you need the HTML just ask and i'll give it to you.

You need to tell the browser via CSS where to repeat, horizontal or vertical.

Your CSS should regarding the background image should look like this:

#col {
background-image: url('col bg.png') repeat-x;
}

PS: are you sure the url of your background image is correct? As far as I know you have to give a relative path to the image (if you are using an image that is stored with the other site info on the server).

yes i'm sure the link is correct and its on my server. wouldn't using background-repeat: repeat; work fine just as i used above, because i want it to repeat x and y. And either way it didn't work.

background-image: url('col bg.png') repeat-x;

Actually, when you add additional properties, it would be like this:

background: url(colbg.png) repeat-x;

wouldn't using background-repeat: repeat;

Unnecssary, the default is to REPEAT, so if you don't specify a direction, or repeat at all, it will repeat by default.

I suspect your problem is that you have not CLEARED your floats. See our stickies for info on clearing floats.

Thanks, it worked!