[RaelRode]

Hey guys.

I just had a PSD - xHTML job to do, and there's something that is really annoying me!

I have two (2), DIVs. A left one and a right one. They're both of different heights and both have a background colour of white. The annoying thing is, because they are different heights, the smaller one shows the background colour of grey (grey is the colour of the whole template), so I've got grey boxes all over the place.

I've tried putting the height at 100%, but that does bugger all. Google hasn't helped either.

Heres the CSS Code.

The left div has the content div in it, because of the last revision, it isn't needed but I can't be arsed to remove it.

#left {
	height: 100%;
	background-color: #FFFFFF;
	float: left;
	width: 677px;
	padding: 10px;
}

#right {
	height: 100%;
	background-color: #FFFFFF;
	float: left;
	width: 300px;
	margin-left: -35px;
}

#content {
	margin: 0 0 0 0;
	width: 600px;
}

All comments are helpful.

** I have also tried putting a DIV around both these DIVs with a white background, but that didn't work either!

[Mongoose]

Why exactly do you have a gray background? I don't totally understand what you're going for.

If you want both columns to extend down the full length of the page, try faux columns.

[RaelRode]

The grey background is the colour of the background of the template. The content area has a white background.

Am trying that faux column thing. Not worked so far though.

[pgo]

This sounds incredibly simple. Can you post an image of what you're trying to create? Are you trying to create a single white column the full height of the page? Why not apply a background image to the body?

What's with the negative margin on #right?

[RaelRode]

The negative margin was because there was an overlap between the two columns. So I fixed it.

You can see a screenshot of the site and what's wrong with it.


Thanks

[MJ07]

You could put left and right in a container div. Add a footer div below left and right but within the container. CSS from there should be quite simple.

There are many workarounds but I always go with the footer one as its pretty failsafe for me, across different browsers/platforms.

[RaelRode]

I have done it with the container div around the two columns. Worked this time!!

Thanks for the input nevertheless.