CSS Help Plzz

hey see my css plzz. Its working exactly what i wanted in IE6 But when i see it in Firefox 1.5 the text is overflowing towards the bottom. Any one can help me plzz? i can fix this by setting up overflow:auto; but it gives a scrollbar which i dont want. I want my layout to strtch in tandum with the content . Plz some one help me plzz.Thanks in advance. Iam giving the URLS of my original table based layout and the one iam trying with pure css and also the one i fixed using overflow option. Need a help plzz.

This is the original Layout which i wanted to convert into a pure css based one:
http://www.raja.supersoftz.com/rajanewlay/index.htm

This is My Effort so far and the problem am having is when i view it in Firefox1.5
http://www.raja.supersoftz.com/rajanewlay/index.htm

This the one i fixed using Overflow option. I Dont like scrollbar there.

http://www.raja.supersoftz.com/rajacss/totalcsslay.htm
cheers
Raja

body {

SCROLLBAR-FACE-COLOR: #DFB98F;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #666666;
SCROLLBAR-3DLIGHT-COLOR: #333333;
SCROLLBAR-ARROW-COLOR: #481D12;
SCROLLBAR-TRACK-COLOR: #333333;
SCROLLBAR-DARKSHADOW-COLOR: #999999;
background-color: #000000;
text-align: center;
margin: 0px;
padding: 0px;
}
#wrapper {
width: 760px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #000000;

}
#contentbg {
background-color: #FFFFFF;
background-image: url(images/main.jpg);
background-repeat: repeat-y;
width: 760px;
height: 317px;
}
#lftcontent {
background-color: #FFFFFF;
width: 440px;
float: left;
position: relative;
left: 40px;
text-align: justify;
padding: 0px;
height: 317px;
}
#contentholder {
}

#rhtcontent {
background-color: #FFFFFF;
height: 317px;
width: 238px;
float: left;
position: relative;
left: 40px;
}


#header {
background-image: url(images/header.jpg);
height: 162px;
width: 760px;
background-repeat: no-repeat;
}
#navbar {
background-image: url(images/button.jpg);
background-repeat: no-repeat;
height: 55px;
width: 760px;
}

#footer {
background-color: #000000;
background-image: url(images/footer.jpg);
height: 66px;
width: 760px;

}
#home{
font: normal bold 9px tahoma, trebuchet ms, verdana, arial, helvetica sans-serif;
height: 55px;
width: 88px;
float: left;
position: relative;
left: 40px;
}
#home a {
background-image: url(images/home.jpg);
background-repeat: no-repeat;
height: 55px;
width: 88px;
background-position: 0px 0px;
display: block;
}
#home a:hover{
background-image: url(images/home_f2.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#portfolio{
font: normal bold 9px tahoma, trebuchet ms, verdana, arial, helvetica sans-serif;
height: 55px;
width: 86px;
float: left;
position: relative;
left: 40px;
}
#portfolio a{background-image: url(images/portfolio.jpg);
background-repeat: no-repeat;
height: 55px;
width: 86px;
background-position: 0px 0px;
display: block;


}
#portfolio a:hover{
background-image: url(images/portfolio_f2.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#forum{
font: normal bold 9px tahoma, trebuchet ms, verdana, arial, helvetica sans-serif;
height: 55px;
width: 82px;
float: left;
position: relative;
left: 40px;
}
#forum a{
background-image: url(images/forum.jpg);
background-repeat: no-repeat;
height: 55px;
width: 82px;
background-position: 0px 0px;
display: block;
}
#forum a:hover{
background-image: url(images/forum_f2.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#templates{
font: normal bold 9px tahoma, trebuchet ms, verdana, arial, helvetica sans-serif;
height: 55px;
width: 84px;
float: left;
position: relative;
left: 40px;
}
#templates a{
background-image: url(images/templates.jpg);
background-repeat: no-repeat;
height: 55px;
width: 84px;
background-position: 0px 0px;
display: block;
}
#templates a:hover{
background-image: url(images/templates_f2.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#tutorials{
font: normal bold 9px tahoma, trebuchet ms, verdana, arial, helvetica sans-serif;
height: 55px;
width: 82px;
float: left;
position: relative;
left: 40px;

}
#tutorials a{
background-image: url(images/tutorials.jpg);
background-repeat: no-repeat;
height: 55px;
width: 82px;
background-position: 0px 0px;
display: block;
}
#tutorials a:hover{
background-image: url(images/tutorials_f2.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}

#flash{
font: normal bold 9px tahoma, trebuchet ms, verdana, arial, helvetica sans-serif;
height: 55px;
width: 82px;
float: left;
position: relative;
left: 40px;
}
#flash a{
background-image: url(images/flash.jpg);
background-repeat: no-repeat;
height: 55px;
width: 84px;
background-position: 0px 0px;
display: block;
}
#flash a:hover{
background-image: url(images/flash_f2.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#graphics{
font: normal bold 9px tahoma, trebuchet ms, verdana, arial, helvetica sans-serif;
height: 55px;
width: 84px;
float: left;
position: relative;
left: 40px;
}
#graphics a{
background-image: url(images/graphics.jpg);
background-repeat: no-repeat;
height: 55px;
width: 84px;
background-position: 0px 0px;
display: block;
}
#graphics a:hover{
background-image: url(images/graphics_f2.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#feedback{
font: normal bold 9px tahoma, trebuchet ms, verdana, arial, helvetica sans-serif;
height: 55px;
width: 89px;
float: left;
position: relative;
left: 40px;
}
#feedback a{
background-image: url(images/feedback.jpg);
background-repeat: no-repeat;
height: 55px;
width: 89px;
background-position: 0px 0px;
display: block;
}
#feedback a:hover{
background-image: url(images/feedback_f2.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}

.maintext {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
A.type1:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none;

}
A.type1:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none;
}
A.type1:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #CC00CC;
text-decoration: line-through;
}
A.type1:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FF0000;
text-decoration: underline overline;

}
.tinytext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FF6600;
}
.textt {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FF0099;
}
#shoutheader{
background-image: url(images/shoutheader.jpg);
background-repeat: no-repeat;
height: 53px;
width: 238px;
}
#shoutcontent{
height: 228px;
background-image: url(images/shoutmain.jpg);
background-repeat: repeat-y;
}
#shoutfooter{
background-image: url(images/shoutbottom.jpg);
background-repeat: no-repeat;
height: 36px;
width: 238px;
}

cheers
Raja:thumbsup:

 

Don't know if this will work but add this for your footer:
#footer { clear:both; }

A tip I wish to add is that you can make your CSS a lot smaller using short-hand properties.
For example
instead of this:
#templates a{
background-image: url(images/templates.jpg);
background-repeat: no-repeat;
height: 55px;
width: 84px;
background-position: 0px 0px;
display: block;
}


You can do this:
#templates a{
background:transparent url(images/templates.jpg) no-repeat left top;
height: 55px;
width: 84px;
display: block;
}

 

where should i add it?

 

Replace this:
#footer {
background-color: #000000;
background-image: url(images/footer.jpg);
height: 66px;
width: 760px;

}

With this:
#footer {
background-color: #000000;
background-image: url(images/footer.jpg);
height: 66px;
width: 760px;
clear: both;
}

 

i just tried it Instromaniac and nothing happend

 

Have you now resolved this? As it appear to work in Firefox.

 

Hmmm what about this instead:
#footer {
background-color: #000000;
background-image: url(images/footer.jpg);
height: 66px;
width: 760px;
clear: both;
float:left;
}

Btw some comments on your html:
First of all you should maybe use XHTML1.0 Transitional or Strict instead of HTML4.
Secondly you write your list of navigation links like this:
<div id="home"><a href="home.htm" class="home"></a></div>

You shouldn't do it like that for two reasons:
It's not semantically correct: it's a a list
It's not accessible: users that turn images off or can't see images won't be able to navigate your site.

You should do this instead:
<ul id="nav">
<li><a href="home.html" id="homelink">Home</a></li>
<!-- and all the other links in the same way, just change the id -->
</ul>

Now you can do something like this to style it:
#nav {padding:0; margin:0; list-style:none}
#nav li {display:inline; float:left; padding:0}
#nav li a {float:left}
#homelink {background: transparent url(locationofimage.jpg) no-repeat 0 0; height:heightofimage; width:widthofimage; text-indent:-9999px}

This is just to style your list like it looks now and to apply an image replacement technique. This way users using a browser that doesn't read CSS will still be able to use the navigation. Won't work for regular browsers with images turned off in that case you better do this:
<ul>
<li><a href="" id=""><img src="" alt="Here's the link text" /></a></li>
</ul>