[r3drock3t88]

Hello,

I have a problem on my website. I would like for my left and right columns to be at the same height as my main middle column. I tried creating an image that is the same color as my columns color, then setting that in CSS as the columns background image and repeating that vertically. I read somewhere that it should repeat constantly until it reaches the longest column, but that didn't work out like I planned.

Does anyone know how I would go about getting my columns all the same length? Thank you in advance!

[MMJ]

Post the css code.

[r3drock3t88]

#navBar{
float: left;
width: 20%;
margin: 0px;
padding: 0px;
background:url(images/filler.gif) repeat-y;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

It repeats until it gets to the end of the column, but it doesn't move the column like I was hoping. I'd like all the columns to be the same height

[WendyM]

Hi rock,
Do you have a link to your page where we could view all of the code? I'm guessing that you need a div around both columns. If you create a background image on that "wrapper" div that's the width of your left column and have it repeat down the side, you should get what you're looking for. For example, if you call that div "content", your css for that div would look something like this:

#content {
	background: url(../images/background.jpg) top left repeat-y;
	margin:0;
	padding:0;
	float:left;
	}

That only adds it to the left side so to add it to both you could add another div like

#content_right {
	background: url(../images/background.jpg) top right repeat-y;
	margin:0;
	padding:0;
	float:right;
	}

There's probably a cleaner way to do it, but that's worked for me in the past. Hope that helps.