Space at the bottom and right side of my page

Question

This is the page: propertytest.uphero.com

I have narrowed down the problem to the 6 blueish boxes (the top 3 are under a div called offers and the 3 below that are under a div called properties). If I was to take them out, the space goes but I would really like to keep them in so I need someone to help me troubleshoot it so that I can keep the boxes and have no space below the footer.

I think my problem lies with the fact they are positioned with relative (all divs are positioned relative - bad idea I now realize that).

I have tried:

• aligning the 2 divs with absolute positioning - that does the trick of getting rid of the space at the bottom/right however if I was to scale down the browser, the boxes go out of position..

• removing all positioning and floating them to the left/right - removes the space at the bottom/right but doesn't go into the position I would like them to ( I don't think you can position floats with top/bottom/left/right or margin? )

Answer 1

Here is how to sort out the 6 boxes that you currently have as position:relative;

http://jsfiddle.net/F9Q6T/

The basic premise is that you float the boxes inside a container and then clearfix them to make the container the right size.

In terms of the issue at the bottom of the page you need to remove bottom:290px; from your footer. This appears to be what is causing the problem

Answer 2

I think main problem is body background image. You have used image of 1300px * 1000px size. i think you must use image of 1px width with repeat property.. And white space at bottom come due to bottom property of orders and properties div`

thanks.