1 Replies - 508 Views - Last Post: 10 October 2012 - 04:36 AM

#1 bijan311  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 65
  • Joined: 31-January 10

Unwanted space between div tags.

Posted 09 October 2012 - 04:50 PM

I put a nav bar for a website I'm working for school, and the only problem is there's a gap between the header and the main content area. Here's my code.

<body class="twoColFixRtHdr" onload="MM_preloadImages('Buttons/About PTO down.png','Buttons/Events down.png','Buttons/Gallery down.png','Buttons/Help Wanted Down.png','Buttons/Newsletter down.png','Buttons/staff down.png','Buttons/Team Captians down.png')">  
<div style="clear:both;">
    <div align="center">
      <p>
      <a href="Index.html">
      <img src="images/mb4_WT850.jpg" alt="Banner" name="Banner" width="855" height="341" id="Banner" class="auto-style1" /></a></p>
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td><a href="about.html" target="_top" onclick="MM_nbGroup('down','group1','AboutPTO','Buttons/About PTO down.png',1)" onmouseover="MM_nbGroup('over','AboutPTO','Buttons/About PTO down.png','Buttons/About PTO down.png',1)" onmouseout="MM_nbGroup('out')"><img src="Buttons/About PTO up.png" alt="About PTO" name="AboutPTO" border="0" id="AboutPTO" onload="" /></a></td>
          <td><a href="events.html" target="_top" onclick="MM_nbGroup('down','group1','Events','Buttons/Events down.png',1)" onmouseover="MM_nbGroup('over','Events','Buttons/Events down.png','Buttons/Events down.png',1)" onmouseout="MM_nbGroup('out')"><img src="Buttons/Events up.png" alt="Events" name="Events" border="0" id="Events" onload="" /></a></td>
          <td><a href="#" target="_top" onclick="MM_nbGroup('down','group1','Galleryup','Buttons/Gallery down.png',1)" onmouseover="MM_nbGroup('over','Galleryup','Buttons/Gallery down.png','Buttons/Gallery down.png',1)" onmouseout="MM_nbGroup('out')"><img name="Galleryup" src="Buttons/Gallery up.png" border="0" alt="Gallery" onload="" /></a></td>
          <td><a href="help_wanted.html" target="_top" onclick="MM_nbGroup('down','group1','HelpWantedup','Buttons/Help Wanted Down.png',1)" onmouseover="MM_nbGroup('over','HelpWantedup','Buttons/Help Wanted Down.png','Buttons/Help Wanted Down.png',1)" onmouseout="MM_nbGroup('out')"><img name="HelpWantedup" src="Buttons/Help Wanted up.png" border="0" alt="Help Wanted" onload="" /></a></td>
          <td><a href="newsletter.html" target="_top" onclick="MM_nbGroup('down','group1','Newsletterup','Buttons/Newsletter down.png',1)" onmouseover="MM_nbGroup('over','Newsletterup','Buttons/Newsletter down.png','Buttons/Newsletter down.png',1)" onmouseout="MM_nbGroup('out')"><img name="Newsletterup" src="Buttons/Newsletter up.png" border="0" alt="Newsletter" onload="" /></a></td>
          <td><a href="board_members.html" target="_top" onclick="MM_nbGroup('down','group1','Staffup','Buttons/staff down.png',1)" onmouseover="MM_nbGroup('over','Staffup','Buttons/staff down.png','Buttons/staff down.png',1)" onmouseout="MM_nbGroup('out')"><img name="Staffup" src="Buttons/Staff up.png" border="0" alt="Staff" onload="" /></a></td>
          <td><a href="team_captains.html" target="_top" onclick="MM_nbGroup('down','group1','TeamCaptiansup','Buttons/Team Captians down.png',1)" onmouseover="MM_nbGroup('over','TeamCaptiansup','Buttons/Team Captians down.png','Buttons/Team Captians down.png',1)" onmouseout="MM_nbGroup('out')"><img name="TeamCaptiansup" src="Buttons/Team Captians up.png" border="0" alt="Team Captains" onload="" /></a></td>
        </tr>
      </table>
  </div>
</div>
<div id="maincontent">

	<div id="table">
 	 <table width="219" height="394" border="1">
   	 <tr>
   	   <td width="236" height="59" colspan="3"><div align="center" class="style4"> Upcoming Events</div></td>
   	 </tr>
   	 <tr>
    	  <td height="92" colspan="3"><p><strong>Apr 20:</strong> Book Exchange</p>
    	    <p><strong>Apr 23 - 27:</strong> TV Turn-off Week</p>
     	   <p><strong>Apr 25:</strong> K-1st Spring Concert</p>
     	   <p><strong>Apr 27:</strong> Talent Show</p>
     	   <p><strong>May 7-11:</strong> First Annual Relay Race</p>
     	   <p><strong>May 8:</strong> Cousins Sub Day</p>
     	   <p><strong>May 19:</strong> Meadoview Auction 12 P.M </p>
     	   <p><strong>May 21:</strong> PTO meeting @ 6:30</p>
    	  <p><strong>June 7:</strong> Field Day</p></td>
    	</tr>
    	<tr>
      
    	</tr>
    	</table>
   </div>
</div>



CSS:
.clearfloat{
	clear:both;
}
#announcement {
	text-align: center;
	margin-left:25px;
	width: 600px;
	height: 475px;
	overflow:auto;
}
.header {
	font-weight: bold;
}
#table {	
	float:right;
}
#maincontent{
	width:855px;
	margin-right: auto;
	margin-left: auto;
	background: white;
}
#text{
	margin-left: 20%;
	margin-right: 20%;
	text-align:justify;
}
#footer{
	width: 855px;
	margin-left:auto;
	margin-right:auto;
	clear:both;
	background:white;
	color:#444444;
	font-size:small;
}
body{
	background:green;
}




Here is a picture of the problem.

Posted Image

Thanks in advance.

Is This A Good Question/Topic? 0
  • +

Replies To: Unwanted space between div tags.

#2 bijan311  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 65
  • Joined: 31-January 10

Re: Unwanted space between div tags.

Posted 10 October 2012 - 04:36 AM

I solved the problem. All I did was but a <br/> tag right after the maincontent div.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1