I'm having a problem with the height of a specific background I have. Think of the background as a rectangle that has a fixed width but will stretch vertically depending on the amount of content in it. Normally this wouldn't be a problem, but I have to smaller boxes within, one which is to sit on the left and the other on the right side. Because of this, I have the one with float: left; and the other float: right;.
As soon as I introduce the float to each of the two classes, the background that has the two boxes within retains its width, since I've set it, but the height of the box is reduced to 10px since i have a top and bottom padding of 5px each.
You can see the problem in the sidebar. I've used bright colours to show the different boxes. The little thumbnail pictures on the left are the float: left boxes and the text on the right is the float: right. They're both supposed to be within the red box, but as you can see, the red doesn't stretch like it should.
Any idea of what I can do to make it work?