Space Below main Div

HTML & CSS
1

Hi I have created a website named http://sgaustria.com/

There is some space between main div (or below content) and footer.

I tried a lot to get rid off that space but still have. Please suggest and help :(:frowning:

2

Hi,

Here is where all that space is coming from -

1) You have relatively positioned the #main div and you moved it up by -45px. The thing about RP though is that it only moves the element visually, it still retains it’s original place in the page.


#main {
width:930px;
margin:0 auto;
overflow:hidden;
position:relative; 
[COLOR=Red]top: -45px;[/COLOR]
padding-bottom: 0px;
margin-bottom: 0px;
}

2) You also have a 5px bottom padding that is contributing to that space on Content

#content {
margin: 0 235px;
overflow:hidden;
width: 450px;
[COLOR=Red]padding-bottom: 5px;[/COLOR]
}

3) There is also a 48px bottom margin on this div class nested in the Content div in the center of the page.

.hentry {
margin:0 0 [COLOR=Red]48px[/COLOR];
}
3

Thanks a lot Rayzur,

It reduced the space now, but i cant remove top: -45px; as it handle the alignment from top for main content div.

#main {
width:930px;
margin:0 auto;
overflow:hidden;
position:relative;
top: -45px;
padding-bottom: 0px;
margin-bottom: 0px;
}

4

Use margin-top:-45px on that #main div and that will move it physically rather than visually :wink: