Empty Space Below Body And Weird Placement Of Divs

I'm making a webpage for a friends site. you can find it here : http://labrostest.byethost8.com/ my problems are the following: I get a huge white empty space bellow my body div

Solution 1:

In you stylesheet there is a seloctor called lower_content. Please find this class and replace your block with this block. A blank space is coming because of unnecessary bottom space used which is used here.

.lower_content {
width: 800px;
margin-left: auto;
margin-right: auto;
position: relative;
bottom: 80px;
right: 30px;
z-index: 2;
}

Solution 2:

Check your bottom heights, they are way off, like .lower_content has 680px to bottom, is way to big. Instead use a smaller margin-bottom, and be sure to clear things after you have floated them

Solution 3:

You need to brush up on your css. Your bottom white space is a margin related issue with the body, and as for your gallery, you said it, it's not positioned correctly so you have a cross browser compatibility issue that is probably something as simple as adding a browser specific css tag, or just readjusting your margins / paddding on the gallery section.

Solution 4:

You use relative positioning to overlap the elements. This changes where the element is displayed, but it will still take up space where it would have been without the relative displacement. That explains why you have a large empty area at the bottom of the page. Rather use a container that has position:relative but no displacement, and use elements with position:absolute inside it to overlay them.

The lower_content and the gallery elements are not large enough to contain the gallery_text element, so it sticks out below them. That is probably what is causing the extra white space below the body element, i.e. its original position before relative displacement would be outside the body element.

---

Also:

You have margin:0 on the body element, but you should also have padding:0 as some browsers (i.e. Opera) uses padding for the default padding of the body instead of margin.

There is a style element in the body element, which should be in the head element instead. That is not likely to cause any problem, but it's safer to put it where it should be according to the standard.