URL:
http://squidg.x10hosting.com/kinder2/aboutus.html
http://squidg.x10hosting.com/kinder2/session_times.html

The problem i have with both of these pages is that the content does not go inside the wrap even though i created them like every other page.

HTML for Aboutus:

<div id="wrap">

<div id="header">

<div id="headerleft">
<img src="logo.jpg" width="191" height="130" alt="Logo">
</div>

<div id="headerright">
<img src="heading.jpg" width="935" height="130" alt="Doncaster Park Kindergarten">
</div>
</div> <!-- end header-->



<div id="contentwrap">
<div id="menu">
<table width="0" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="65"><p><img src="pink_pencil.gif" width="55" height="43" alt="Image" ></p></td>
<td width="125"><p><a class="menu-pink" href="index.html">Home</a></p></td>
</tr>
<tr>
<td><p><img src="orange_pencil.gif" width="55" height="43" alt="Image" ></p></td>
<td><p><a class="menu-orange" href="aboutus.html">About us</a></p></td>
</tr>
<tr>
<td><p><img src="yellow_pencil.gif" width="55" height="43" alt="Image" ></p></td>
<td><p><a class="menu-yellow" href="session_times.html">Session Times</a></p></td>
</tr>
<tr>
<td><p><img src="green_pencil.gif" width="55" height="43" alt="Image" ></p></td>
<td><p><a class="menu-green" href="enrolment.html">Enrolment</a></p></td>
</tr>
<tr>
<td><p><img src="blue_pencil.gif" width="55" height="43" alt="Image" ></p></td>
<td><p><a class="menu-blue" href="fees.html"> Fees</a></p></td>
</tr>
<tr>
<td><p><img src="purple_pencil.gif" width="55" height="43" alt="Image" ></p></td>
<td><p><a class="menu-purple" href="news.html">News</a></p></td>
</tr>
<tr>
<td><p><img src="red_pencil.gif" width="55" height="43" alt="Image" ></p></td>
<td><p><a class="menu-red" href="upcoming_events.html">Upcoming Events</a></p></td>
</tr>
<tr>
<td><p><img src="teal_pencil.gif" width="55" height="43" alt="Image" ></p></td>
<td><p><a class="menu-teal" href="contact.html">Contact</a></p></td>
</tr>
</table>

</div>

<div id="maincontent">
<span class="heading">About us</span>
<p>Situated in a quiet, leafy area of Doncaster, the Kindergarten provides a safe, secure and stable kindergarten experience. </p>
<p>Doncaster Park Kindergarten is a place where your child will develop and grow physically, socially, emotionally and intellectually.</p>
<img src="http://forums.x10hosting.com/images/IMG_7209.JPG" width="280" height="204" alt="Image">
<img src="http://forums.x10hosting.com/images/IMG_7946.JPG" width="280" height="204" alt="Image">
<p>The Kindergarten is an incorporated association, owned and operated by the parents.</p>
<p>The staff are employed by the association to offer the pre-school program. Parents have an important role in the operation of the kindergarten at all levels. The committee of management is responsible for all administration and financial affairs of the kindergarten and determines the vision and policy of the kindergarten.</p>
<img src="http://forums.x10hosting.com/images/IMG_8236.JPG" width="316" height="230" alt="Image">

</div> <!--end maincontent-->
</div> <!--end content-->


</div>
</body>

CSS:
html, body {
margin:0;
padding:0;
height:100%;
}


#wrap {
width:100%;
margin:auto;
height: 100%;
}


#contentwrap {
width:auto;
background-color:#A8D3FF;
height: 100%;
}


#headerleft {
width:191px;
float:left;

}

#headerright {
width: auto;
}

#menu {
height:100%;
float:left;
width:190px;
background: #62B0FF;
border: solid thin #000;
vertical-align:bottom;
}


#maincontent {
margin-left: 26%;
margin-right: 8%;
padding: 1%;
text-align: left;
}


Also the only page that is displayed properly in IE is the contact page... Why is that?

What do you mean with "within the wrap"? I see nothing different on those two pages compared with the other pages.

Sorry for my unclear explanation.
On both of those pages the content does not stay within the #maincontent
As you can see on the About Us page at the bottom half the image is within #maincontent and half is out. This causes the gab between the #maincontent and the background.

The same happens on the Session Times page. But it doesn't happen on any other page?

What browser do you see this in? I see no gaps.

I am viewing it in firefox 3.0

And when i view it in IE6 its all messed up

I've looked in K-Mel, Opera and actually IE6.

The blue menu color goes all the way down. So does the lighter blue content background. The only thing that resembles a gap I can see is a very thin line of the darker blue at the bottom of the pages below the lighter blue. But that line's there on all pages.

I see...
In IE6 when you click on the following:

-Enrolment
-Fees
-News
-Upcoming events

Doesn't the menu move for you?

Thanks again for doing this =D

The menu seems to be a few pixels lower down on contact and about us. But no gaps.

I checked it on a friends mac and it has the same problem as i see on my computer. However, i checked it on my brother's computer and there is no problem....

If i dont have the height: 100% in the body then the menu doesn't extend all the way down to the bottom of the page... =[

I've also realised that if i remove the images at the bottom of the page from:

http://squidg.x10hosting.com/kinder2/aboutus.html
http://squidg.x10hosting.com/kinder2/session_times.html

It displays correctly. But i want to keep those images?

Can you post a screen shot of that gap you see?

The problem shows up if you narrow the browser window enough in FF3/Linux.

Screen shots:

About Us page:
http://i143.photobucket.com/albums/r129/focussss/1-3.jpg

Session Times
http://i143.photobucket.com/albums/r129/focussss/2-2.jpg



I managed to find a solution for the gap which was to use an image to give an illusion that the menu container borders continues to the bottom edge. This image repeats on the left hand side of the #contentwrap container div.

with the below amendments this will work, in IE6, IE7, FireFox, Safari, Opera and Chrome

#wrap {height:auto;margin:auto;width:100%;}
#contentwrap {background:url(images/menuborder.gif) repeat-y left #A8D3FF;height:100%;width:auto;}

#menu {background:#62B0FF none repeat scroll 0 0; border: 0px;
border-top:thin solid #000;float:left;height:100%;vertical-align:bottom;width:190px;
margin-left: 2px !important;
margin-left:1px; /*IE6 fix */
}



However, i am still having the IE6 problem. A screen shot of the IE6 problem can be found below:

http://i143.photobucket.com/albums/r129/focussss/3-1.jpg


The new link to the fixed page is:
http://squidg.x10hosting.com/kinderfix/index.html

I have fixed the issue guys. Thank you so much for your help! i really appreciate it