hello guys, i need help with how to size the height of a webpage, i normally use 100%, but the pages normally look messed up in Mozilla Firebox and looks good in IE.

What the solution?

Cheers all.

I am on mobile now so i cant contribute much. Read up on specifying your heights in pixels and when to use 'auto'. U use 100% when u want a container to fill up as much space as the parent container. You use auto wen u want the container to 'grow' wit its content.

I tried using 'auto' but it was not still looking fine in Firefox.

Post the html and css here please.

CSS

body {
margin:0px auto;
width:100%;
font-family:Arial, Helvetica, sans-serif;
}
#h1 {
margin: 0 auto;
padding: 0;
background:#551817;
height:80px;
}
#header {
width:900px;
height:80px;
margin: 0 auto;
}
#logo {
width:270px;
height:70px;
float:left;
margin-left:10px;
margin-top:5px;
}
#hotline {
width:280px;
height:40px;
float:right;
margin-right:20px;
margin-top:20px;
}
#m1 {
margin: 0 auto;
padding: 0;
background:#000000;
height:45px;
}
#menu {
width:900px;
height:45px;
margin: 0 auto;
}
#menus {
width:400px;
height:30px;
float:right;
margin-right:20px;
margin-top:5px;
text-align:right;
}
.menus {
font-size:12px;
color:#FFF;
text-decoration:none;
line-height:25px;
padding-top:3px;
padding-right:5px;
padding-left:5px;
}
#main {
margin: 0 auto;
padding: 0;
}
#mains {
width:908px;
margin: 0px auto;
background:url(images/mainbg.jpg);
height:550px;
}
#leftpanel {
width:240px;
border-right:1px solid #CCC;
float:left;
margin-top:25px;
margin-left:3px;
}
#welcome {
width:230px;
margin-left:10px;
margin-bottom:20px;
}
#welcomeheader {
width:230px;
height:30px;
margin-bottom:10px;
}
#welcometxt {
width:220px;
}
.welcometxt {
font-size:12px;
line-height:20px;
color:#666;
text-align:justify;
}
.welcometxtheader {
font-size:15px;
line-height:30px;
color:#666;
font-weight:bold;
}
#adbanner {
width:230px;
height:180px;
margin-left:10px;
}
#leadimage {
width:630px;
height:424px;
float:right;
margin-right:20px;
margin-top:25px;
}
#footer {
margin: 0 auto;
padding: 0;
background:#551817;
height:60px;
}
#footers {
width:900px;
height:60px;
margin: 0 auto;
}
#copy {
width:250px;
height:40px;
float:left;
margin-top:10px;
}
#signature {
width:200px;
height:40px;
float:right;
margin-top:10px;
}
.footer {
font-size:12px;
color:#FFF;
line-height:35px;
text-decoration:none;
}
#innerimage {
width:230px;
height:100px;
margin-bottom:5px;
}
.services {
width:230px;
height:30px;
line-height:27px;
font-size:12px;
color:#C30;
}
#contentheader {
width:600px;
height:40px;
}
.contentheader {
font-size:15px;
line-height:35px;
font-weight:bold;
}
#content {
width:620px;
}
.content {
font-size:12px;
color:#333;
line-height:20px;
text-align:justify;
}

HTML

<div id="h1">
<div id="header">
<div id="logo"><img src="images/logo.jpg" width="270" height="70" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="3,4,266,67" href="#" alt="Bernice Keynes Interiors" / title="Bernice Keynes Interiors">
</map>
</div>
<div id="hotline"><img src="images/hotline.jpg" width="280" height="40" /></div>
</div>
</div>
<div id="m1">
<div id="menu">
<div class="menus" id="menus"><a href="#" class="menus">Home</a> | <a href="about.html" class="menus">About Us</a> | <a href="#" class="menus">Our Services</a> | <a href="#" class="menus">Photo Gallery</a> | <a href="#" class="menus">Contact Us</a></div>
</div>
</div>
<div id="main">
<div id="mains">
<div id="leftpanel">
<div id="welcome">
<div class="welcometxtheader" id="welcomeheader">Bernice Keynes Interiors</div>
<div class="welcometxt" id="welcometxt">lorem ipsum dolor sit amet felis quisque
eros. Cras lobortis o lorem
ipsum dolor. Vestibulum vel purus. In
eget odio in sapien adipiscing blandit.
Quisque augue tortor, facilisis sit amet,
aliquam, suscipit lorem ipsum dolor.
Pellentesque pede.
lorem ipsum dolor sit amet felis quisque
eros. Cras lobortis commodo lorem
ipsum dolor. Vestibulum vel purus. </div>
</div>

<div id="adbanner"><img src="images/banner.jpg" width="220" height="180" /></div>

</div>
<div id="leadimage"><img src="images/leadimage.jpg" width="630" height="424" /></div>
</div>
</div>
<div id="footer">
<div id="footers">
<div class="footer" id="copy">Copyright © 2010 Bernice Keynes Interiors</div>
<div class="footer" id="signature"><a href="http://www.synchsolutions.com" target="_blank" class="footer">Website by Synch Solutions</a></div>
</div>
</div>

Where are you having problems?
This is what your code looks like on both browsers on my end.

Yeah, it looks OK this way but the content section has got a background image, and when i add more content(text), i expect the page to stretch, unfortunately it doesn't.

Maybe you can try and delete the lead image and and loads of texts to see what i mean, you could change the BG color too.

Thanks for your responses.

I have made the following changes to your code

#leadimage {
      width:630px;
      height:auto;
      float:right;
      margin-right:20px;
      margin-top:25px;
}


#mains {
      width:908px;
      margin: 0px auto;
      background:url(images/mainbg.jpg);
      height:auto;
   }

Add this to your CSS
.clear { clear: both; }


Add this to your html right after the closing </div> tag for the leadimage div.
<div class="clear"></div>


That's all, you're good to go if you make the changes correctly.

Dual Core, THANK YOU VERY MUCH. YOU HAVE TAUGHT ME ANOTHER LESSON IN CSS, I'LL NEVER FORGET IT.

GOD BLESS YOU.

You're welcome.