CSS & IE Problem

[squidg]

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

The problem i have with both of thesepages 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?

 

[zkiller]

I haven't looked at it in IE, but first thing I noticed is that you are missing float properties for #headerright and #maincontent. Also, you might want to set some min-width properties for your content containers, #wrap and #contentwrap.

Also here is a good tutorial on the proper use of the float property.

http://css.maxdesign.com.au/floatutorial/

Good luck!