CSS & IE Problem

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

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

HTML for Aboutus:

%26lt;div id=''wrap''%26gt;

%26lt;div id=''header''%26gt;

%26lt;div id=''headerleft''%26gt;
%26lt;img src=''logo.jpg'' width=''191'' height=''130'' alt=''Logo''%26gt;
%26lt;/div%26gt;

%26lt;div id=''headerright''%26gt;
%26lt;img src=''heading.jpg'' width=''935'' height=''130'' alt=''Doncaster Park Kindergarten''%26gt;
%26lt;/div%26gt;
%26lt;/div%26gt; %26lt;!-- end header--%26gt;

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

%26lt;/div%26gt;

%26lt;div id=''maincontent''%26gt;
%26lt;span class=''heading''%26gt;About us%26lt;/span%26gt;
%26lt;p%26gt;Situated in a quiet, leafy area of Doncaster, the Kindergarten provides a safe, secure and stable kindergarten experience. %26lt;/p%26gt;
%26lt;p%26gt;Doncaster Park Kindergarten is a place where your child will develop and grow physically, socially, emotionally and intellectually.%26lt;/p%26gt;
%26lt;img src=''http://forums.x10hosting.com/images/IMG_7209.JPG'' width=''280'' height=''204'' alt=''Image''%26gt;
%26lt;img src=''http://forums.x10hosting.com/images/IMG_7946.JPG'' width=''280'' height=''204'' alt=''Image''%26gt;
%26lt;p%26gt;The Kindergarten is an incorporated association, owned and operated by the parents.%26lt;/p%26gt;
%26lt;p%26gt;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.%26lt;/p%26gt;
%26lt;img src=''http://forums.x10hosting.com/images/IMG_8236.JPG'' width=''316'' height=''230'' alt=''Image''%26gt;

%26lt;/div%26gt; %26lt;!--end maincontent--%26gt;
%26lt;/div%26gt; %26lt;!--end content--%26gt;

%26lt;/div%26gt;
%26lt;/body%26gt;

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?

Thanks for your time =)

CSS %26 IE Problem

The first thing I would try is to get rid of all of?the

height:100%;

I dont see the point to that.

Second, add a little bottom padding to the offending %26lt;div%26gt;, see if that does not fix you up...

Gary

CSS %26 IE Problem

The reason for the height: 100% is so the wrap and the menu extend all the way to the bottom of the page. Is there another way of doing this?

I looked at your site before I left and you have some issues, i will look at it later when I have more time.

But setting the height to 100% will not insure that the div expands with the text, it does that by default.?Are you trying to get the columns all the same height??If so, seting a height is NOT the best way to do that.

Let me know what you are looking to solve and I will look at it later.

Gary

Regarding getting the divs to appear to be the same height, add a background image (set to repeat-y) to the wrapper div that imitates the background colors that you want to show all the way down. Then, the background will fill down to the full depth of the wrapper div.

The image would be a several pixels high image that runs full across the width of the wrapper div. You can either make it somewhat wider horizontally, so that those with wide screens don't experience a lack of background on the right if the viewport opens up too wide, or set a body background-color to match the right hand 'column' background color.

Beth

In addition to what Beth said, you must set this rule in the wrapper div

overflow:hidden;

To get the even column look.

It is called faux columns.

gary