Gaps in Background

StuPeas posted this at 10:36 — 5th June 2006.

Joined: Oct 2004

Im doing the example from chapter 8 of sitePoints css utopia and ive come across an effect that i just cant get my head around.

I have a main div that contains all the main content and the sidebar for the page, and it has no padding set.

Inside the main div is the content div that holds only the content and not the sidebar- also with no padding or top margins.

Directly inside this div is a "mainfeature" div that acts as a "blockbox",contianing the initial H2 header and a couple of paragraphs - also with no padding or margins set.

My question is---Why, when i apply a backround colour rule (with css) to the mainfeature div, does that background colour not extend to the top of the main div. After all i have no padding set on either the main or content divs.

Please note that i know how to fix this, but that is not what im asking. Im more interested in finding out what is going on here (this is why ive commented out the css that fixes the problem.

Thanx in advance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Footbag Freaks</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	
<style type="text/css"> 
	 
  body {
      margin:0; 
	  padding:0;
	  background-color:#050845;
	  color:white;
	  background-image:url(shared/footbag_freaks_images/bg.jpg);
	  background-repeat:repeat-x;
	  font: small Arial, Helvetica, Verdana, sans-serif;
	  }
	  
   #wrapper {
       background-color:#fdf8f2;
	   color:black;
	   margin:30px 40px 30px 40px;
	   padding:10px;
	   }
	   
  #header-bottom {
       border-top: 1px solid #b9d2ef;
	   border-bottom: 1px solid #b9d2ef;
	   }
	   
   #header-bottom ul {
        margin:0;
		padding:0;
		padding:0 30px 0 0;
		text-align:right;
		}
	   
   #header-bottom li {
        display:inline;
		background-color: #fdf8f2;
		color: #050845;
		}
		
   #header-bottom a:link, #header-bottom a:visited {
        text-decoration:none;
		background-color: #fdf8f2;
		color: #050845;
		}
		
   #tagline {
        font-weight: bold;
		background-color: #fdf8f2;
		color:#050845;
		font-style: italic;
		margin:0;
		padding: 0 0 0 20px;
		width:300px;
		float:left;
		}
		
    #ball {
	    position: absolute;
		top:110px;
		right:55px;
		}
		
    #main {
	    margin-top:10px;
		background-color:red;
		}
		
	#content {
	     margin: 0 240px 0 0;
		 border:1px solid #b9d2e3;
		 background-color:lightblue;
		 color:black;
		 }
		 
	#mainfeature{
	   /* background-image: url(shared/footbag_freaks_images/mainimg.jpg);
		 background-repeat:no-repeat;*/
		 background-color: #112236;
		 color:white;
		/* padding: 2em 2em 1em 200px;*/
		 }
		 
	
	#mainfeature h2{
	     /*margin:0;*/
		 font-weight:normal;
		 font-size:140%;
		 color:white;
		 }
	  
	

	
	
</style>
	
</head>

<body>
 
 <div id="wrapper">
 
  <div id="header">
  <img src="shared/footbag_freaks_images/logo.gif" alt="Footbag Freaks" height="77" width="203" />
   <div id="header-bottom">
    <p id="tagline">The Home of the Hack</p>
	<ul>
	 <li><a href="">Contact Us</a> | </li>
	 <li><a href="">About Us</a> | </li>
	 <li><a href="">Privacy Policy</a> | </li>
	 <li><a href="">Sitemap</a></li>
	</ul>
	<img src="shared/footbag_freaks_images/header-ball.gif" height="24" width="20" alt="" id="ball" />
	</div> <!--End Header-Bottom-->
  </div>  <!--End Header-->
  
 <div id="main">
 
  <div id="content">
  
   <div id="mainfeature">
    <h2>Simon Says</h2>
	<p>Simon Mackie tells us how a change has given him new moves and a new
	   outlook as the new season approaches.</p>
	<p><a href="">Read More</a></p>
   </div>                        <!--End Mainfeature-->
 
	<h2>Recent Features</h2>
	<ul>
	   <li>
	      <h3>Head for the Hills: Is Altitude Training the Answer?</h3>
		  <p>Lachlan 'Super Toe' Donald</p>
		  <p>fjdhh hhrywk cnjde fjfk  jue e ssnfjjg ffkkdje ddjdg fj y llssbfgdh heotvals gdksmrbt 
		     ejegssl nfrhfd kek ekkfu ttjse, rkfirkel rhjesmf rme</p>
		  <p><a href="">Full Story</a></p>
	   </li>
	   
	   <li>
	      <h3>Hack up the Place: Freestylin' Super Tips</h3>
		  <p>Jules 'Pony King' Szemere</p>
	      <p>hujgff hjkkunb jdesjbvtoo llfdcvbtsdaweojgfbv lkdsnhctdfaraldksugvbqpic
		     hyt fredf fr tghyuj kkijgf ftrgd ghyj llokgtsbbg </p>
		  <p><a href="">Full Story</a></p>
	   </li>
	   
	   <li>
	      <h3>The Complete Black Hat Hackers Survival Guide</h3>
		  <p>Mark 'Steel Tip' Harbottle</p>
		  <p>hdys jsurn ffkie kaalld jjrjdn kkd rhht ksbgk dhhryys ksgnhftd kks dggr hhr r rrjd haaie
		     hhedj</p>
		  <p><a href="">Full Story</a></p>
	   </li>
	   
	   <li>
	      <h3>Five Tricks You Didnt Even Know You Knew</h3>
		  <p>Simon 'Mack Daddy' Mackie</p>
		  <p>dghys flgkks djfurnncd ddmf ddkswkf dskfnnr d sjjff dnsjjt dmmck dkkrnt  djjss rrr
		     ehfjjdnsjj pttie smmf cdjje dkk kslsa  ff fm  k</p>
		  <p><a href="">Full Story</a></p>
	   </li>
	 </ul>
  </div>     <!--End Content-->
  
  <div id="sidebar">
    <h3>Site Search</h3>
	<form method="post" action="" id="searchform">
	  <div>
	  <label for="keywords">Keywords</label>:
	  <input type="text" name="keywords" id="keywords" />
      </div>
	  <div>
	  <input type="submit" name="btnSearch" id="btnSearch" />
	  </div>
	</form>
	
	<h3>Coming Events</h3>
	<ul>
	  <li>10 April 06 -<br /><a href="">Seattle Zone Qualifier</a></li>
	  <li>13 April 06 -<br /><a href="">World Cup - Round 8</a></li>
	  <li>21 April 06 -<br /><a href="">FootbagOOM 05 - NY</a></li>
	  <li>28 April 06 -<br /><a href="">WFPA AGM - Hong Kong</a></li>
	  <li>3 May 06 -<br /><a href="">World Cup - Round 9</a></li>
	</ul>
	
	<h3>Move of the Month</h3>
	<h4>The Outer Stall</h4>
	<p>jdh  nwnn duilaa js htmssk jsjrrnnw ppeiisn ffkk a ddorke dksuur dksmmak ddlk
	   hrrmeeussmf kkrla mmreds ddmmrot rkfmdds</p>
	<p><a href="">More</a></p>
  </div>
	     <!--End Sidebar-->
</div>                    <!--End Main-->	 
   
</div>   <!--Wrapper Div-->
</body>
</html>