Grow your CSS skills. Land your dream job.

Mysterious Gap

  • # June 30, 2008 at 9:39 pm

    I’m trying to develop a american football themed site for a friend who’s looking for a website for his amateur team.

    I have a gap between the footer div and the div containing main content but just cant work out what is causing the gap. I want to move the blue footer section so that it is flush with the white content section, removing the gap which shows the grass background underneath.

    Any suggestions would be most appreciated!

    [img]http://i101.photobucket.com/albums/m52/nickc01/jets.jpg[/img]

    html:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    Last Match

    Jets :49
    Rockets: 10

    Next Match

    Jets vs
    Cannons

    Another Victory for the Edinburgh Jets

    American football match shot

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



    CSS:

    Code:
    @charset “utf-8″;
    /* CSS Document */
    * {
    margin:0;
    padding:0;
    }
    .clear {
    clear:both;
    background:url(images/body-bg.png) repeat-y;
    }
    .floatleft{
    float:left;
    }
    .floatright{
    float:right;
    }

    body {
    background-image:url(images/bg.jpg);

    }

    h1 {
    font-size:1.3em;
    }

    p {
    margin:15px;
    padding:15px;
    color:#666666;
    }

    h1, h2 {
    margin:15px;
    padding:15px;
    color:#0066FF;
    }

    h3 {
    margin:5px;
    padding:15px;
    color:#0066FF;
    }
    #page-wrap {
    margin: 0 auto;
    width:683px;
    }

    div#header{
    background:url(images/header.png) no-repeat;
    width:691px;
    height:206px;
    }

    ul#menu {
    list-style:none;
    margin-top:150px;
    margin-left:410px;
    position:absolute;
    top:22px;
    }
    ul#menu li {
    display:inline;
    }
    ul#menu li a {
    text-indent:-999px;
    display:block;
    width:86px;
    height:20px;
    float:left;
    }
    ul#menu li a.team {
    background-image:url(images/images/midnav-normal_01.png);
    }
    ul#menu li a.results {
    background:url(images/images/midnav-normal_02.png);
    color:#CCCCCC;
    }
    ul#menu li a.news {
    background:url(images/images/midnav-normal_03.png);
    }
    ul#menu li a.team:hover {
    background-image:url(images/images/midnav-hover_01.png);
    }
    ul#menu li a.results:hover {
    background-image:url(images/images/midnav-hover_02.png);
    }
    ul#menu li a.news:hover {
    background-image:url(images/images/midnav-hover_03.png);
    }

    #main-content{
    background:url(images/body-bg.png) repeat-y;
    padding:50px 20px 0 0;
    padding-left:30px;
    }

    #scoreboard {
    width:185px;
    padding-left:20px;
    padding-bottom:20px;
    }

    div#score-top {background:url(images/one.gif) no-repeat; height:20px;}
    div#score-mid {background:url(images/scorefill.jpg) repeat-y; color:#FFFFFF; font-family:”Courier New”, Courier, monospace; padding:10px;}
    div#score-btm {background:url(images/scorebottom.jpg); height:92px;}

    div#score-mid table{
    margin-left:15px
    }

    #footer {
    background:url(images/footer-bg.png) repeat-y;
    text-align:center;
    padding:10px;
    clear:both;
    }

    # June 30, 2008 at 10:03 pm

    well just from looking at the code you put up. I would guess that it’s the 15px margin that you have on the <p> tag in your css. So your last paragraph in the main content is saying that there should be a 15px margin from anything else. The footer looks like it might just be 15 pixels away. yep, another look. Try removing the margin:15px from the p tag in your css document

    # July 2, 2008 at 12:46 am

    hey cybershot many thanks for your help! Space now gone and page looking good.

    I wonder if anybody could clarify something for me and help fill in the gaps in my understanding of the box model?

    It was my assumption that as the that as the margin was applied to the <p> tag and it was within a <div> i thought that there would be a 15px margin between the end of the <p> and the end of the containing <div> leaving the footer <div> flush against the <div> before. Where am I going wrong :-)

    Thanks, Nick

    # July 2, 2008 at 5:35 am

    There’s tons of explanations out there when it comes to the Box Model. Wikipedia has a good and neutral article about it too.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".