Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Mysterious Gap

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #22867

    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:



    A Cool American Football Website

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

    #48296

    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

    #48304
    koewnet
    Member

    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 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.