Forums

nickcallaghan

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!

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

html:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<link type=\"text/css\" rel=\"stylesheet\" href=\"style.css\" />

<title>A Cool American Football Website</title>
</head>

<body>

<div id=\"page-wrap\">

<div id=\"header\">
	<ul id=\"menu\">
		<li><a href=\"#\" class=\"team\"> &nbsp;</a></li>
    	<li><a href=\"#\" class=\"results\"> &nbsp;</a></li>
    	<li><a href=\"#\" class=\"news\">&nbsp;</a></li>
	</ul>
</div>

<div id=\"main-content\">

<div id=\"scoreboard\" class=\"floatright\">

<div id=\"score-top\"></div>
<div id=\"score-mid\">
<h3>Last Match</h3>

<table>
	<tr><td>Jets :49</td></tr>
    <tr><td>Rockets: 10</td></tr>
</table>

<h3>Next Match</h3>

<table>
	<tr><td>Jets vs</td></tr>
    <tr><td>Cannons</td></tr>
</table>


</div>
<div id=\"score-btm\"></div>

</div> <!-- End of Scoreboard -->


<h1>Another Victory for the Edinburgh Jets</h1>
<img src=\"images/img1.jpg\" alt=\"American football match shot\" class=\"floatright\" width=\"200\" />

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

<p>
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.
</p>
</div>
<div class=\"clear\"></div>

<div id=\"footer\">&copy;Footer Goes Here</div>
</div> <!-- End Page Wrap -->
</body>
</html>

CSS:

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

cybershot

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

nickcallaghan

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

koewnet

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

treehouse : what would you like to learn today?

Forums

Mysterious Gap