Jump to content

gap between mainContent and footer


grabenair

Recommended Posts

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;

 

}

Link to comment
Share on other sites

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 by grabenair
Link to comment
Share on other sites

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;}

?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...