gap between mainContent and footer

[grabenair]

I have a small gap between the main content and the footer. I had one between the main content and the main nav. I fixed that by experimenting and found that when I put the margin to 0 on the top instead of just leaving it blank,DWCS4, it salved the problem but does not work on the footer. I could just fix this by making my wrapper the same color as my main content but that leaves my border short.

 

body {

background-image: url(../imgs/texture.jpg);

}

#wrapper {

background-color: #C99;

width: 960px;

margin-right: auto;

margin-left: auto;

border: thin solid #000;

}

#header {

height: 120px;

width: 960px;

}

#main_nav {

background-color: #FFF;

width: 960px;

height: 42px;

}

#left_sidebar {

width: 200px;

background-color: #F00;

height: 200px;

float: left;

border-top-width: thin;

border-top-style: solid;

border-top-color: #000;

}

#main_content {

width: 748px;

background-color: #FFF;

margin-left: 200px;

padding-left: 10px;

margin-top: 0px;

border-top-width: thin;

border-top-style: solid;

border-top-color: #000;

border-left-width: thin;

border-left-style: solid;

border-left-color: #9D9D9D;

margin-bottom: 0px;

}

#main_nav img {

margin-left: 178px;

padding-top: 10px;

}

 

#footer {

width: 960px;

font-size: 10px;

text-align: center;

background-color: #FFF;

height: 15px;

 

}

[PicnicTutorials]

Hello, upload the link instead.

[grabenair]

Eric I just uploaded the page to my server. I can leave it up for a few hours as I took down the site and put up this revised page I am working on Thank You.

http://www.roxanesmarine.com

PS I will be using short hand CSS just forgot to so far. I am still learning to use short hand

Edited March 24, 2011 by grabenair

[Andrea]

You wouldn't happen to have that page up online somewhere and can send a link? That makes it so much easier to help - and besides, we'd need to see the HTML too, just to make sure the issue isn't in there somehow.

 

Or - have you tried

* {margin: 0; padding: 0;}

?

[grabenair]

I now have the page on line forgot to move it to the right file on my server sorry.

http://www.roxanesmarine.com

[grabenair]

oh ya it is really ugly still working on it

[falkencreative]

That gap is caused by the last <p> tag within #main_content, since it has a bottom margin that browsers automatically add to <p> tags. One easy fix for this is to add "overflow:hidden" to #main_content, so it encloses all the elements inside it properly.

 

Also -- one quick note -- there's really no need to use blank <p> tags: <p> </p>. If you need to add some additional space, adding a bottom margin or padding on #main_content instead.

[grabenair]

The blank <p> tag is for an imag i havent put in yet. Thanks I will try this

[grabenair]

I fixed this prob. I just made the main content and left sidebar to height when I got the rest of the page done instead of letting the content set the height works for now thanks everbody

[Andrea]

Setting the height will be an issue if different pages have different amounts of content.