Text break bottom of image in Firefox but not IE

So I am having an issue. Oddly enough with something working in IE but not Firefox. My text bypasses the bottom of a repeated image.

Here's my css.

/* CSS Document */
a
{
font-size:10pt;
text-decoration:none;
color:black
}

a:hover
{
font-size:10pt;
text-decoration:none;
color:maroon
}

body
{
margin: 0 0 0 0;
background:#424239;
font-family:Arial, Helvetica, sans-serif;
text-align: center;
}


#main
{
width:780px;
height:100%;
text-align: left;
background:url(images/contentbg.jpg) repeat-y;
}

#top
{
background:url(images/mainbg.jpg) repeat-y;
height:245px;
}

.left
{
float:left;
height:100%;
width:512px;
}

.right
{
float:left;
height:100%;
width:268px;
}
#logo
{
background:url(images/logo.jpg) no-repeat;
height:34px;
width:209px;
}

#tagline
{
background:url(images/tagline.jpg) no-repeat;
height:18px;
width:512px;
text-align:right;
font-weight:bold;
font-size:11pt;
font-family:Arial, Helvetica, sans-serif
}

#head
{
background:url(images/header.jpg) no-repeat;
height:193px;
width:512px;
}


.right a
{
font-size:10pt;
text-decoration:none;
padding-left:19px;
color:black
}

.right a:hover
{
font-size:10pt;
text-decoration:none;
padding-left:19px;
color:maroon
}

.home
{
background:url(images/home.jpg) no-repeat;
height:16px;
width:56px;
margin-left:3px;
}

.sitemap
{
background:url(images/sitemap.jpg) no-repeat;
height:16px;
width:67px;
}

.contact
{
background:url(images/contact.jpg) no-repeat;
height:16px;
width:66px;
}


#menu
{
margin-top:32px;
background:#FFA40F url(images/menubg.jpg) no-repeat;
height:193px;
width:268px;

}

.menu_l
{
padding-top:4px;
height:22.5px;
}

.menu_l a
{
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;

}

.menu_l a:hover
{
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
color:red;
}

#content
{
height:100%;
width:760px;
}

.left_c
{
float:left;
height:100%;
width:500px;
padding-left:12px;
}

h1
{
color:#CE0101;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
}
.right_c
{
float:left;
height:100%;
width:190px;
padding-left:10px;
}
.rhead
{
background:url(images/r_header.jpg) no-repeat;
height:31px;
width:190px;
padding-top:5px;
padding-LEFT:10px;
margin-left:-10px;
font-weight:bold;
}
.btn
{
background-color:#FF0000;
color:white;
border:solid 1px black;
font-weight:bold
}
.rightm_c
{
float:right;
background:url(images/gridalogy.jpg) no-repeat;
width:46px;
height:264px;
}
#footer
{
padding-left:120px;
color:#000066
}

The page can be found at
http://www.gridalogy.com/new/

you may have to set an exact height, i dont like the 100%, it really never works that well for me



#content
{
height:400px;
width:760px;
}

you may have to set an exact height, i dont like the 100%, it really never works that well for me



#content
{
height:400px;
width:760px;
}



That works beautifully, thank you so much :)

no problem

no problem


Oh, but the other issue is this page is going to be a template for all the other pages in the site. So I can't really set a size, i need it to be able to span for different amounts of text.

ok im stumped about this, i know its probably an easy answer but i cant think of it. If anyone can answer this i am interested in knowing how to do this. i thought not putting a height on the div would let it expand or atleast an inherit property. None of those seem to work though!!

ok im stumped about this, i know its probably an easy answer but i cant think of it. If anyone can answer this i am interested in knowing how to do this. i thought not putting a height on the div would let it expand or atleast an inherit property. None of those seem to work though!!

Try making these changes:#main
{
width:780px;
text-align: left;
background:url(images/contentbg.jpg) repeat-y;
}

#top
{
background:url(images/mainbg.jpg) repeat-y;
height:245px;
}
#content
{
width:760px;
overflow: auto;
}

Try making these changes:#main
{
width:780px;
text-align: left;
background:url(images/contentbg.jpg) repeat-y;
}

#top
{
background:url(images/mainbg.jpg) repeat-y;
height:245px;
}
#content
{
width:760px;
overflow: auto;
}


Very awesome, works exactly how i need it too. Thanks. The only thing is when the page is empty the stuff from the right side comes over to the left and again, it only does this on Firefox and not IE. But as long as I have text on the page, it works fine. If there is a way around this, that would be great. If not, this works awesome, thank you very much.

Very awesome, works exactly how i need it too. Thanks. The only thing is when the page is empty the stuff from the right side comes over to the left and again, it only does this on Firefox and not IE. But as long as I have text on the page, it works fine. If there is a way around this, that would be great. If not, this works awesome, thank you very much.

Try this:.right
{
float:right;
height:100%;
width:268px;
}


You may need to re-arrange your markup for that to work, I didn't check.

Try this:.right
{
float:right;
height:100%;
width:268px;
}


You may need to re-arrange your markup for that to work, I didn't check.


That didn't work right away. It may require some rearranging. For now, I need to work on just getting the site up and running. And as long as there is anything in the left column everything looks good. So I think for now I am going to leave it, as I will not have any pages that are complete void of anything in the left column. Thanks for all the help :)