Jump to content

Recommended Posts

Posted

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;

 

}

Posted (edited)

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
Posted

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

?

Posted

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.

Posted

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

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...