I am having a problem getting my divs to sit on top of eachother on my website.
I think my css is causing it. My page is simple, it starts with the header, then the nav bar, then a div inside the main content div with two divs inside that(one floated left the other right).
Then the gap appears!!!
it’s about 8 or 9 px in height. I’ve checked all the padding and margins and nothing seems to work. I am also using firebug with no luck.
Please help!
Hi, welcome to sitepoint 
Please provide the entire code(html,css) in [ code][ /code] tags (without the spaces) or provide a link to your page. Then we’ll be able to help you.
<!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>
<title>OttawaFitnessTraining</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/navMain.js"></script>
<script type="text/javascript" src="scripts/swfobject_modified.js"></script>
<script type="text/javascript" src="scripts/imageSwap.js"></script>
<style>li{list-style-type:none;}</style>
</head>
<body onload="MM_preloadImages('images/activeBtn2.gif','images/activeBtn3.gif','images/activeBtn4.gif','images/activeBtn5.gif','images/activeBtn.gif','images/cec_boxes_ov.png','images/cec_boxes2_ov.png','images/cec_boxes_ov3.png','images/socialLogo_ov.png','images/socialLogo_ov-02.png','images/socialLogo_ov-03.png','images/newfcbox_ov.png','images/newfcbox_ov-02.png','images/newfcbox_ov-03.png')">
<div id="wrapper">
<div id="header"><img src="images/house.png" width="15" height="13" alt="home" /><span>home</span></div>
<div id="mainNav">
<a href="fitnesscoaching.html" target="_top" onclick="MM_nbGroup('down','group1','fitnessCoaching','',1)" onmouseover= "MM_nbGroup('over','fitnessCoaching','images/activeBtn.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/navBtn.gif" alt="" name="fitnessCoaching" border="0" id="fitnessCoaching" onload="" /></a><a href="cec.html" target="_top" onclick="MM_nbGroup('down','group1','cec','',1)" onmouseover="MM_nbGroup('over','cec','images/activeBtn2.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/navBtn-02.gif" alt="" name="cec" border="0" id="cec1" onload="" /></a><a href="about.html" target="_top" onclick="MM_nbGroup('down','group1','about','',1)" onmouseover="MM_nbGroup('over','about','images/activeBtn3.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/navBtn-03.gif" alt="" name="about" width="129" height="33" border="0" id="about" onload="" /></a><a href="contact.html" target="_top" onclick="MM_nbGroup('down','group1','contact','',1)" onmouseover="MM_nbGroup('over','contact','images/activeBtn4.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/navBtn-04.gif" alt="" name="contact" width="127" height="33" border="0" id="contact" onload="" /></a><a href="forum.html" target="_top" onclick="MM_nbGroup('down','group1','forum','',1)" onmouseover="MM_nbGroup('over','forum','images/activeBtn5.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/navBtn-05.gif" alt="" name="forum" width="128" height="33" border="0" id="forum" onload="" /></a>
</div><!--mainnav-->
<div id="maincontentHome">
<div id="maincontent_top" class="clearfix">
<div id="videoscreen">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="437" height="223">
<param name="movie" value="video/video.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="scripts/expressInstall.swf" />
<object type="application/x-shockwave-flash" data="video/video.swf" width="437" height="223">
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="scripts/expressInstall.swf" />
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width ="112" height="33" /></a></p>
</object>
</object>
</div>
<div id="dissforum">
<img src="images/forum_H1.png" width="135" height="42" alt="Forum" />
<p>Lorem ipsum dolor sit ametconctetur adipiscing elit. Pellentessemper dolor et liberotristiquee posuere mauris.</p>
</div>
</div><!--maincontent_top-->
<div id="maincontent_bottom" class="clearfix">
<div id="CEC">
<h2>Continuing Education Credits</h2>
<p>Lorem ipsum dolor sit ametconctetur adipiscing elit. Pellentessemper dolor et liberotristiquee posuere mauris.</p>
<ul id="boxes">
<li id="box1"><a href="cec.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/cec_boxes_ov.png',1)"><img src="images/cec_boxes.png" alt="#" name="cec_box1" width="237" height="49" border="0" id="Image7" /></a>
</li>
<li id="box2"><a href="cec.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('cec_box2','','images/cec_boxes2_ov.png',1)"><img src="images/cec_boxes-02.png" alt="#" name="cec_box2" width="237" height="52" border="0" id="cec_box2" /></a>
</li>
<li id="box3"><a href="cec.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('cec_box3','','images/cec_boxes_ov3.png',1)"><img src="images/cec_boxes-03.png" alt="#" name="cec_box3" width="237" height="52" border="0" id="cec_box3" /></a>
</li>
</ul>
</div><!--CEC-->
<div id="coaching" class="clearfix">
<h2>Fitness Coaching</h2>
<p>Lorem ipsum dolor sit ametconctetur adipiscing elit. Pellentessemper dolor et liberotristiquee posuere mauris.</p>
<ul id="boxes2">
<li id="box4"><a href="fitnesscoaching.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('fc1','','images/newfcbox_ov.png',1)"><img src="images/new1fcbox.png" name="fc1" width="121" height="165" border="0" id="fc1" alt="#" /></a>
</li>
<li id="box5"><a href="fitnesscoaching.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('fc2','','images/newfcbox_ov-02.png',1)"><img src="images/newfcbox.png" name="fc2" width="121" height="165" border="0" id="fc2" alt="#" /></a>
</li>
<li id="box6"><a href="fitnesscoaching.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('fc3','','images/newfcbox_ov-03.png',1)"><img src="images/newfcbox-03.png" name="fc3" width="121" height="165" border="0" id="fc3" alt="#" /></a>
</li>
</ul>
</div><!--coaching-->
<ul id="footerlist" class="clearfix">
<li>
<div id="advertise">
<h3>OFT Advertising</h3>
<div id="adsign"></div>
<p>Lorem ipsumdo sit ametconcadip it. Pellentesse dolor et liberotr posue. ametconctetur adipiscing elit.</p>
<span><a href="advertising.html">More Info</a></span>
</div><!--advertise-->
</li>
<li>
<div id="findus">
<h3>Find Us</h3>
<p>Lorem ipsum dolor sit ametconctetur adipiscing elit. Pellentessemper dolor liberotristiquee posuere mauris.</p>
<ul id="iconlist">
<li id="icon1"><a href="http://www.facebook.com" target="_blank" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('icon1','','images/socialLogo_ov.png',1)"><img src="images/socialLogo.png" alt="facebook" name="icon1" width="40" height="40" border="0" id="icon4" /></a>
</li>
<li id="icon2"><a href="http://www.twitter.com" target="_blank" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('icon2','','images/socialLogo_ov-02.png',1)"><img src="images/socialLogo-02.png" alt="twitter" name="icon2" width="42" height="40" border="0" id="icon5" /></a>
</li>
<li id="icon3"><a href="http://www.youtube.com" target="_blank" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('icon3','','images/socialLogo_ov-03.png',1)"><img src="images/socialLogo-03.png" alt="youtube" name="icon3" width="42" height="40" border="0" id="icon6" /></a>
</li>
</ul><!--iconlist-->
</div><!--findus-->
</li>
<li>
<div id="community">
<h3>Join The<br/> Community</h3>
<p>Lorem ipsum dol<br/>or sit ametconcte tur adipiscinjhf.<br/> Pellentessemper dolorlib erotri po<br/>suere mauris.</p>
<form action="#">
<label>Email</label>
<input type="text" />
</form>
<span><img src="images/news.png" width="56" height="58" alt="newsletter" /></span>
</div><!--community-->
</li>
</ul><!--footerlist-->
</div><!--maincontent_bottom-->
<div id="footer" class="clearfix">
<ul>
<li><a href="index.html">Home</a> |</li>
<li><a href="fitnesscoaching.html">Fitness Coaching</a> |</li>
<li><a href="cec.html">Continuing Education Credits</a> |</li>
<li><a href="about.html">About OFT</a> |</li>
<li><a href="contact.html">Contact</a> |</li>
<li><a href="forum.html">Discussion Forum</a></li>
</ul>
<p>©2010 Ottawa Fitness Training All Rights Resverved</p>
</div><!--footer-->
</div><!--maincontent-->
</div><!--wrapper-->
</body>
</html>
/************************************************
************************************************************************************************************************************************
Contents
01- General
02- Header
03- Main Content
03.1- maincontent_top
03.2- maincontent_bottom
03.3- CEC
03.4- Fitness Coaching
04- Footer List
04.1- OFT Advertising
04.2- Find Us
04.3- Community
05- Footer
/*************************************************************************************************************************************************************************************************
01- General
*************************************************************************************************************************************************************************************************/
*{margin:0;padding:0;}
body{
background-color:#fff;
}
#wrapper{/*background-image:url(../images/strip.png);background-position:center;background-repeat:repeat-y;*/padding-left:21px;width:660px;margin:auto;}
@font-face {font-family:ImperatorSmallCaps;src: url('ImperatorSmallCaps.ttf');}
a:link{text-decoration:none;}
a:visited{text-decoration:none;color:#FFF;}
span a:hover{color: #a21818;}
/**************************************************************************************************************************************************************************************************
02- Header
/**************************************************************************************************************************************************************************************************/
#header{background-image:url(../images/header_bg.png);width:640px;height:228px;}
#header span {font-family: Verdana, Geneva, sans-serif;font-size: 10px;padding-left: 3px;color: #999;}
#header img {padding-top: 35px;padding-left: 13px;}
/*******************************************************************************************************************************************************************************************
03-Main Content
*****************************************************************************************************************************************************************************************
03.1- maincontent_top
**************************************************************************************************************************************************************************/
#maincontent {background-image: url(../images/fenceBg.png);background-repeat: repeat-y;width: 640px;}
#maincontent_top {width: 640px;}
.clearfix:after {content:'.';display:block;clear:both;visibility:hidden;height:0;}
#videoscreen {
width:437px;
float: left;
margin-right:203px;
}
#dissforum {
background-image: url(../images/forum_bg.gif);
width: 203px;
float:left;
margin-left:-203px;
height: 223px;
}
#dissforum img {margin-left: 34px;margin-top: 10px;}
#dissforum p {font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #FFF;}
#dissforum form {margin-top: 12px;margin-right: 15px;margin-bottom: 12px;}
#dissforum form label {color: #a21818;font-size: 12px;}
#dissforum form input {margin: 2px;}
#dissforum form span {color: #FFF;font-size:11px;}
/********************************************************************************************************************************************************************
03.2- maincontent_bottom
*******************************************************************************************************************************************************************/
#maincontent_bottom {background-image: url(../images/fenceBglight.png);background-repeat: no-repeat;width: 640px;clear: both;}
/*#maincontent_bottom {background-image: url(../images/btm_mc_edit.png);height: 443px;width: 640px;clear:both;}*/
#maincontent_bottom p {font-size: 12px;margin-left:15px;color: #a21818;}
/**************************************************************************************************************************************************************************
03.3- CEC
*************************************************************************************************************************************************************************/
h1{font-family:Verdana, Geneva, sans-serif;font-size:18px;color:#A90000;margin-left: 10px;padding-top: 5px;}
h2 {font-family:ImperatorSmallCaps;font-size:14px;padding-bottom:3px;color:#CCC;padding-top: 14px;margin-left: 10px;}
#CEC {
float: left;
width:260px;
margin-right:375px;
}
ul#boxes {margin-left: 15px;margin-top: 5px;}
ul#boxes li {padding: 1px;}
ul#boxes #box1 {background-repeat:no-repeat;width:237px;height:49px;}
ul#boxes #box2 {background-repeat:no-repeat;width:237px;height:52px;}
ul#boxes #box3 {background-repeat:no-repeat;width:237px;height:52px;}
#sections {
background-image: url(../images/sectionBg.png);
width: 610px;
background-repeat:repeat;
margin-left: 15px;
border: 1px solid #CCC;
margin-top: 10px;
}
/**********************************************************************************************************************************************************************
03.4- Fitness Coaching
*********************************************************************************************************************************************************************/
#coaching {width: 375px;float:left;margin-left:-375px;}
ul#boxes2{margin-left: 13px;margin-top: 14px;}
ul#boxes2 li {padding: 3px;}
ul#boxes2 #box4 {float:left;width:110px;height:159px;}
ul#boxes2 #box5 {float:left;width:110px;height:159px;}
ul#boxes2 #box6 {float:left;width:110px;height:159px;}
/**********************************************************************************************************************************************************************
04- Footer List
*********************************************************************************************************************************************************************/
h3 {
margin-left:13px;
padding-bottom:10px;
font-family:ImperatorSmallCaps;
font-size: 14px;
color:#CCC;
margin-top: 25px;
}
#footerlist2 {
background-image: url(../images/footers.png);
background-repeat: no-repeat;
width: 640px;
clear: both;
height: 195px;
}
#aboutlist {
font-size: 12px;
color: #FFF;
margin-left: 25px;
padding-bottom: 10px;
}
ul#footerlist {background-image: url(../images/footers.png);background-repeat: no-repeat;width: 640px;clear:both;list-style-type: none;}
#footerlist li{display:inline;float:left;width:213px;}
#iconlist li {list-style-type: none;}
/***********************************************************************************************************************************************************************
04.1- OFT Advertising
**********************************************************************************************************************************************************************/
/*#advertise {width: 213px;float: left;}*/
#adsign {background-image: url(../images/adSign.png);background-repeat: no-repeat;height: 89px;width: 99px;float: right;padding-bottom: 10px;}
#advertise span {font-family: Verdana, Geneva, sans-serif;font-size: 10px;color: #FFF;margin-left: 16px;}
/**************************************************************************************************************************************************************************************************************************
04.2- Find Us
*************************************************************************************************************************************************************************************************************************/
/*#findus {width: 213px;float: left;}*/
ul#iconlist #icon1 {margin-left:40px;margin-top:10px;height: 40px;width: 40px;float: left;}
ul#iconlist #icon2 {margin-top:10px;height: 43px;width: 42px;float: left;}
ul#iconlist #icon3 {margin-top:10px;height: 40px;width: 46px;float: left;}
/********************************************************************************************************************************************************************************************************************
04.3- Community
*******************************************************************************************************************************************************************************************************************/
/*#community {width: 213px;float: left;}*/
#community span {position: relative;bottom: 145px;left: 110px;}
#community form {margin-left: 13px;margin-top: 5px;}
form label {display: block;font-family: Verdana, Geneva, sans-serif;font-size: 11px;color: #a21818}
/******************************************************************************************************************************************************************************************************************
05- Footer
*****************************************************************************************************************************************************************************************************************/
#footer {background-image: url(../images/footer.gif);height: 58px;width: 640px;clear: both;}
#footer p {font-family: Verdana, Geneva, sans-serif;font-size: 9px;clear: both;margin-left: 5px;}
#footer ul li {float: left;color: #999;font-size: 9px;font-family: Verdana, Geneva, sans-serif;padding-left: 5px;list-style-type:none;}
#footer ul li a:hover {color:#FFF;}
#footer ul li a:visited {color: #999;}
/*#footer #bg_1 {background-image: url(../images/footers.png);background-repeat: no-repeat;height: 190px;width: 640px;}
#footer #bg_2 {background-image: url(../images/footers-02.png);height: 59px;width: 640px;}*/
/*#maincontent #bg p {font-family: Verdana, Geneva, sans-serif;color: #FFF;font-size: 12px;padding: 10px;border: 1px solid #CCC;}*/
/*#bg {background-image: url(../images/mainCont_bg.png);background-repeat: no-repeat;width: 639px;height: 480px;}*/
/*#fencebg {background-image: url(../images/fenceBg.png);background-repeat: repeat-y;width: 640px;}*/
/*#maincontent p {font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #FFF;padding: 20px;width: 500px;}*/
.toptext{font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #FFF;padding-right: 10px;padding-left: 10px;padding-top: 10px;padding-bottom: 10px;}
.btmtext {font-size: 12px;margin-left:15px;color: #a21818;}
.kBell{font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #FFF;padding-left: 30px;}
/*this is for contact.html*/
#maincontent img {border: 1px solid #CCC;margin-left: 15px;margin-top: 10px;}
#formwindow {width: 280px;float: right;background-image: url(../images/sectionBg.png);background-repeat: repeat-y;border: 1px solid #666;margin-right:50px;margin-top: 25px;}
It’s still hard to debug without images, you should give your images heights and widths and background-colors as well as background images so the design still works without images.
I’ve given your main div’s background colors - where are the gaps?
<!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>
<title>OttawaFitnessTraining</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" media="screen">
/************************************************
****************************************************************************** ******************************************************************
Contents
01- General
02- Header
03- Main Content
03.1- maincontent_top
03.2- maincontent_bottom
03.3- CEC
03.4- Fitness Coaching
04- Footer List
04.1- OFT Advertising
04.2- Find Us
04.3- Community
05- Footer
/****************************************************************************** ****************************************************************************** *************************************
01- General
****************************************************************************** ****************************************************************************** *************************************/
*{margin:0;padding:0;}
body{
background-color:#fff;
}
#wrapper{/*background-image:url(../images/strip.png);background-position:center;background-repeat:repeat-y;*/padding-left:21px;width:660px;margin:auto;}
@font-face {font-family:ImperatorSmallCaps;src: url('ImperatorSmallCaps.ttf');}
a:link{text-decoration:none;}
a:visited{text-decoration:none;color:#FFF;}
span a:hover{color: #a21818;}
/****************************************************************************** ****************************************************************************** **************************************
02- Header
/****************************************************************************** ****************************************************************************** **************************************/
#header{background-image:url(../images/header_bg.png);width:640px;height:228px;}
#header span {font-family: Verdana, Geneva, sans-serif;font-size: 10px;padding-left: 3px;color: #999;}
#header img {padding-top: 35px;padding-left: 13px;}
/****************************************************************************** ****************************************************************************** *******************************
03-Main Content
****************************************************************************** ****************************************************************************** *****************************
03.1- maincontent_top
****************************************************************************** ****************************************************************************** **************/
#maincontent {background-image: url(../images/fenceBg.png);background-repeat: repeat-y;width: 640px;}
#maincontent_top {width: 640px;}
.clearfix:after {content:'.';display:block;clear:both;visibility:hidden;height:0;}
#videoscreen {
width:437px;
float: left;
margin-right:203px;
}
#dissforum {
background-image: url(../images/forum_bg.gif);
width: 203px;
float:left;
margin-left:-203px;
height: 223px;
}
#dissforum img {margin-left: 34px;margin-top: 10px;}
#dissforum p {font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #FFF;}
#dissforum form {margin-top: 12px;margin-right: 15px;margin-bottom: 12px;}
#dissforum form label {color: #a21818;font-size: 12px;}
#dissforum form input {margin: 2px;}
#dissforum form span {color: #FFF;font-size:11px;}
/****************************************************************************** ****************************************************************************** ********
03.2- maincontent_bottom
****************************************************************************** ****************************************************************************** *******/
#maincontent_bottom {background-image: url(../images/fenceBglight.png);background-repeat: no-repeat;width: 640px;clear: both;}
/*#maincontent_bottom {background-image: url(../images/btm_mc_edit.png);height: 443px;width: 640px;clear:both;}*/
#maincontent_bottom p {font-size: 12px;margin-left:15px;color: #a21818;}
/****************************************************************************** ****************************************************************************** **************
03.3- CEC
****************************************************************************** ****************************************************************************** *************/
h1{font-family:Verdana, Geneva, sans-serif;font-size:18px;color:#A90000;margin-left: 10px;padding-top: 5px;}
h2 {font-family:ImperatorSmallCaps;font-size:14px;padding-bottom:3px;color:#CCC;padding-top: 14px;margin-left: 10px;}
#CEC {
float: left;
width:260px;
margin-right:375px;
}
ul#boxes {margin-left: 15px;margin-top: 5px;}
ul#boxes li {padding: 1px;}
ul#boxes #box1 {background-repeat:no-repeat;width:237px;height:49px;}
ul#boxes #box2 {background-repeat:no-repeat;width:237px;height:52px;}
ul#boxes #box3 {background-repeat:no-repeat;width:237px;height:52px;}
#sections {
background-image: url(../images/sectionBg.png);
width: 610px;
background-repeat:repeat;
margin-left: 15px;
border: 1px solid #CCC;
margin-top: 10px;
}
/****************************************************************************** ****************************************************************************** **********
03.4- Fitness Coaching
****************************************************************************** ****************************************************************************** *********/
#coaching {width: 375px;float:left;margin-left:-375px;}
ul#boxes2{margin-left: 13px;margin-top: 14px;}
ul#boxes2 li {padding: 3px;}
ul#boxes2 #box4 {float:left;width:110px;height:159px;}
ul#boxes2 #box5 {float:left;width:110px;height:159px;}
ul#boxes2 #box6 {float:left;width:110px;height:159px;}
/****************************************************************************** ****************************************************************************** **********
04- Footer List
****************************************************************************** ****************************************************************************** *********/
h3 {
margin-left:13px;
padding-bottom:10px;
font-family:ImperatorSmallCaps;
font-size: 14px;
color:#CCC;
margin-top: 25px;
}
#footerlist2 {
background-image: url(../images/footers.png);
background-repeat: no-repeat;
width: 640px;
clear: both;
height: 195px;
}
#aboutlist {
font-size: 12px;
color: #FFF;
margin-left: 25px;
padding-bottom: 10px;
}
ul#footerlist {background-image: url(../images/footers.png);background-repeat: no-repeat;width: 640px;clear:both;list-style-type: none;}
#footerlist li{display:inline;float:left;width:213px;}
#iconlist li {list-style-type: none;}
/****************************************************************************** ****************************************************************************** ***********
04.1- OFT Advertising
****************************************************************************** ****************************************************************************** **********/
/*#advertise {width: 213px;float: left;}*/
#adsign {background-image: url(../images/adSign.png);background-repeat: no-repeat;height: 89px;width: 99px;float: right;padding-bottom: 10px;}
#advertise span {font-family: Verdana, Geneva, sans-serif;font-size: 10px;color: #FFF;margin-left: 16px;}
/****************************************************************************** ****************************************************************************** **************************************************************
04.2- Find Us
****************************************************************************** ****************************************************************************** *************************************************************/
/*#findus {width: 213px;float: left;}*/
ul#iconlist #icon1 {margin-left:40px;margin-top:10px;height: 40px;width: 40px;float: left;}
ul#iconlist #icon2 {margin-top:10px;height: 43px;width: 42px;float: left;}
ul#iconlist #icon3 {margin-top:10px;height: 40px;width: 46px;float: left;}
/****************************************************************************** ****************************************************************************** ********************************************************
04.3- Community
****************************************************************************** ****************************************************************************** *******************************************************/
/*#community {width: 213px;float: left;}*/
#community span {position: relative;bottom: 145px;left: 110px;}
#community form {margin-left: 13px;margin-top: 5px;}
form label {display: block;font-family: Verdana, Geneva, sans-serif;font-size: 11px;color: #a21818}
/****************************************************************************** ****************************************************************************** ******************************************************
05- Footer
****************************************************************************** ****************************************************************************** *****************************************************/
#footer {background-image: url(../images/footer.gif);height: 58px;width: 640px;clear: both;}
#footer p {font-family: Verdana, Geneva, sans-serif;font-size: 9px;clear: both;margin-left: 5px;}
#footer ul li {float: left;color: #999;font-size: 9px;font-family: Verdana, Geneva, sans-serif;padding-left: 5px;list-style-type:none;}
#footer ul li a:hover {color:#FFF;}
#footer ul li a:visited {color: #999;}
/*#footer #bg_1 {background-image: url(../images/footers.png);background-repeat: no-repeat;height: 190px;width: 640px;}
#footer #bg_2 {background-image: url(../images/footers-02.png);height: 59px;width: 640px;}*/
/*#maincontent #bg p {font-family: Verdana, Geneva, sans-serif;color: #FFF;font-size: 12px;padding: 10px;border: 1px solid #CCC;}*/
/*#bg {background-image: url(../images/mainCont_bg.png);background-repeat: no-repeat;width: 639px;height: 480px;}*/
/*#fencebg {background-image: url(../images/fenceBg.png);background-repeat: repeat-y;width: 640px;}*/
/*#maincontent p {font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #FFF;padding: 20px;width: 500px;}*/
.toptext{font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #FFF;padding-right: 10px;padding-left: 10px;padding-top: 10px;padding-bottom: 10px;}
.btmtext {font-size: 12px;margin-left:15px;color: #a21818;}
.kBell{font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #FFF;padding-left: 30px;}
/*this is for contact.html*/
#maincontent img {border: 1px solid #CCC;margin-left: 15px;margin-top: 10px;}
#formwindow {width: 280px;float: right;background-image: url(../images/sectionBg.png);background-repeat: repeat-y;border: 1px solid #666;margin-right:50px;margin-top: 25px;}
#header { background: red }
#mainNav { background: blue }
#videoscreen { background: green }
#dissforum { background: purple }
#maincontent_bottom { background: orange }
#CEC { background: yellow }
#coaching { background: brown }
#footerlist { background: beige }
</style>
<script type="text/javascript" src="scripts/navMain.js"></script>
<script type="text/javascript" src="scripts/swfobject_modified.js"></script>
<script type="text/javascript" src="scripts/imageSwap.js"></script>
<style>li{list-style-type:none;}</style>
</head>
<body onload="MM_preloadImages('images/activeBtn2.gif','images/activeBtn3.gif','images/activeBtn4.gif','images/activeBtn5.gif','images/activeBtn.gif','images/cec_boxes_ov.png','images/cec_boxes2_ov.png','images/cec_boxes_ov3.png','images/socialLogo_ov.png','images/socialLogo_ov-02.png','images/socialLogo_ov-03.png','images/newfcbox_ov.png','images/newfcbox_ov-02.png','images/newfcbox_ov-03.png')">
<div id="wrapper">
<div id="header"><img src="images/house.png" width="15" height="13" alt="home" /><span>home</span></div>
<div id="mainNav">
<a href="fitnesscoaching.html" target="_top" onclick="MM_nbGroup('down','group1','fitnessCoaching','',1)" onmouseover= "MM_nbGroup('over','fitnessCoaching','images/activeBtn.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/navBtn.gif" alt="" name="fitnessCoaching" border="0" id="fitnessCoaching" onload="" /></a><a href="cec.html" target="_top" onclick="MM_nbGroup('down','group1','cec','',1)" onmouseover="MM_nbGroup('over','cec','images/activeBtn2.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/navBtn-02.gif" alt="" name="cec" border="0" id="cec1" onload="" /></a><a href="about.html" target="_top" onclick="MM_nbGroup('down','group1','about','',1)" onmouseover="MM_nbGroup('over','about','images/activeBtn3.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/navBtn-03.gif" alt="" name="about" width="129" height="33" border="0" id="about" onload="" /></a><a href="contact.html" target="_top" onclick="MM_nbGroup('down','group1','contact','',1)" onmouseover="MM_nbGroup('over','contact','images/activeBtn4.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/navBtn-04.gif" alt="" name="contact" width="127" height="33" border="0" id="contact" onload="" /></a><a href="forum.html" target="_top" onclick="MM_nbGroup('down','group1','forum','',1)" onmouseover="MM_nbGroup('over','forum','images/activeBtn5.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/navBtn-05.gif" alt="" name="forum" width="128" height="33" border="0" id="forum" onload="" /></a>
</div><!--mainnav-->
<div id="maincontentHome">
<div id="maincontent_top" class="clearfix">
<div id="videoscreen">
<p>FLASH</p>
</div>
<div id="dissforum">
<img src="images/forum_H1.png" width="135" height="42" alt="Forum" />
<p>Lorem ipsum dolor sit ametconctetur adipiscing elit. Pellentessemper dolor et liberotristiquee posuere mauris.</p>
</div>
</div><!--maincontent_top-->
<div id="maincontent_bottom" class="clearfix">
<div id="CEC">
<h2>Continuing Education Credits</h2>
<p>Lorem ipsum dolor sit ametconctetur adipiscing elit. Pellentessemper dolor et liberotristiquee posuere mauris.</p>
<ul id="boxes">
<li id="box1"><a href="cec.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/cec_boxes_ov.png',1)"><img src="images/cec_boxes.png" alt="#" name="cec_box1" width="237" height="49" border="0" id="Image7" /></a>
</li>
<li id="box2"><a href="cec.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('cec_box2','','images/cec_boxes2_ov.png',1)"><img src="images/cec_boxes-02.png" alt="#" name="cec_box2" width="237" height="52" border="0" id="cec_box2" /></a>
</li>
<li id="box3"><a href="cec.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('cec_box3','','images/cec_boxes_ov3.png',1)"><img src="images/cec_boxes-03.png" alt="#" name="cec_box3" width="237" height="52" border="0" id="cec_box3" /></a>
</li>
</ul>
</div><!--CEC-->
<div id="coaching" class="clearfix">
<h2>Fitness Coaching</h2>
<p>Lorem ipsum dolor sit ametconctetur adipiscing elit. Pellentessemper dolor et liberotristiquee posuere mauris.</p>
<ul id="boxes2">
<li id="box4"><a href="fitnesscoaching.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('fc1','','images/newfcbox_ov.png',1)"><img src="images/new1fcbox.png" name="fc1" width="121" height="165" border="0" id="fc1" alt="#" /></a>
</li>
<li id="box5"><a href="fitnesscoaching.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('fc2','','images/newfcbox_ov-02.png',1)"><img src="images/newfcbox.png" name="fc2" width="121" height="165" border="0" id="fc2" alt="#" /></a>
</li>
<li id="box6"><a href="fitnesscoaching.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('fc3','','images/newfcbox_ov-03.png',1)"><img src="images/newfcbox-03.png" name="fc3" width="121" height="165" border="0" id="fc3" alt="#" /></a>
</li>
</ul>
</div><!--coaching-->
<ul id="footerlist" class="clearfix">
<li>
<div id="advertise">
<h3>OFT Advertising</h3>
<div id="adsign"></div>
<p>Lorem ipsumdo sit ametconcadip it. Pellentesse dolor et liberotr posue. ametconctetur adipiscing elit.</p>
<span><a href="advertising.html">More Info</a></span>
</div><!--advertise-->
</li>
<li>
<div id="findus">
<h3>Find Us</h3>
<p>Lorem ipsum dolor sit ametconctetur adipiscing elit. Pellentessemper dolor liberotristiquee posuere mauris.</p>
<ul id="iconlist">
<li id="icon1"><a href="http://www.facebook.com" target="_blank" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('icon1','','images/socialLogo_ov.png',1)"><img src="images/socialLogo.png" alt="facebook" name="icon1" width="40" height="40" border="0" id="icon4" /></a>
</li>
<li id="icon2"><a href="http://www.twitter.com" target="_blank" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('icon2','','images/socialLogo_ov-02.png',1)"><img src="images/socialLogo-02.png" alt="twitter" name="icon2" width="42" height="40" border="0" id="icon5" /></a>
</li>
<li id="icon3"><a href="http://www.youtube.com" target="_blank" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('icon3','','images/socialLogo_ov-03.png',1)"><img src="images/socialLogo-03.png" alt="youtube" name="icon3" width="42" height="40" border="0" id="icon6" /></a>
</li>
</ul><!--iconlist-->
</div><!--findus-->
</li>
<li>
<div id="community">
<h3>Join The<br/> Community</h3>
<p>Lorem ipsum dol<br/>or sit ametconcte tur adipiscinjhf.<br/> Pellentessemper dolorlib erotri po<br/>suere mauris.</p>
<form action="#">
<label>Email</label>
<input type="text" />
</form>
<span><img src="images/news.png" width="56" height="58" alt="newsletter" /></span>
</div><!--community-->
</li>
</ul><!--footerlist-->
</div><!--maincontent_bottom-->
<div id="footer" class="clearfix">
<ul>
<li><a href="index.html">Home</a> |</li>
<li><a href="fitnesscoaching.html">Fitness Coaching</a> |</li>
<li><a href="cec.html">Continuing Education Credits</a> |</li>
<li><a href="about.html">About OFT</a> |</li>
<li><a href="contact.html">Contact</a> |</li>
<li><a href="forum.html">Discussion Forum</a></li>
</ul>
<p>©2010 Ottawa Fitness Training All Rights Resverved</p>
</div><!--footer-->
</div><!--maincontent-->
</div><!--wrapper-->
</body>
</html>
Ok, I’try to give the images heights and widths and background-colors.
One gap appears inbetween maincontent_top div and maincontent_bottom div, the other appears inbetween the footerlist ul and the footer div.
Sounds like default browser margins are causing that.
For example, try setting the top and bottom margins on the H2 elements to zero and see it that stops the first gap you mentioned. E.g.
h2 {
margin: 0 375px 0 0;
}
I’ve managed to fix the gap inbetween the footerlist ul and the footer div. It was the form input field inside the community div creating the gap.
The other gap still exists however. Tried changing the margins on the h2 with no success.
any ideas?
i know where the gap is coming from, it is below the videoscreen div. When I import the swf into the videoscreen div(which sits inside maincontent_top div) it puts a gap inbetween it’s div and maincontent_bottom, why does this happen and how can i fix it?
Just a guess but try something like this:
#videoscreen object,#videoscreen embed{
margin:0;
padding:0;
display:block;
}
If that doesn’t work and the design allows then try adding float:left to the above also.
unfortunately that did not work:(
Do you have a live link that we can look at? It will be hard to debug without seeing a live page. Also mention what browsers show the gaps - or is it all browsers?
In some browsers you will get a gap where you have left images as inline elements because they get placed on the baseline and leave room for descenders. You also have whitespace before the closing div tags in elements that hold images and these can cause gaps also.
You will probably get a gap in the manNav in Ie so you could try floating the images there:
#mainNav{overflow:hidden}
#mainNav img{float:left}
BTW all that javascript rollover code should be replaced with simple css hover effects instead (assuming they are just rollovers).
well I don’t have a host yet so I can’t post my site live.
The gap appears in ff and ie
I will definitely change the javascript nav to css hover rollovers. thanks!
I will try to get a host soon then send you the link,
thanks for all your help:)
No problem and sorry we weren’t much constructive help. It would be an easy problem to solve once we could see the problem as these things are pretty common.