Layouts without setting height

I'm used to doing css layouts for my websites and I picked up a bad habit along the way. I set my height for areas I put text in and adjust it as need be. Well that worked for years, until I ran into a layout design for a blog. I need to set up layout that looks right in both FF and IE browsers: Currently the way I'm doing it now (not setting height for the main part that is going to stretch with the text) looks right in IE but not in Firefox.

<STYLE TYPE="text/css">
<!--

#panel {
width: 950px;
background-color: #b10303;
background-image: url('images/panel-bkg.gif');
margin: 0 auto;
}

#header {
width:950px;
height:450px;
background-image: url('images/header-bkg.jpg');
}

#main-content {
float: right;
padding-top: 20px;
width: 720px;
}

#inside {
width: 950px;
padding: 20px;
}

#footer {
width:950px;
height:150px;
background-image: url('images/footer-bkg.gif');
}

#footer-bottom {
width:950px;
height:45px;
background-image: url('images/footer-bottom-bkg.gif');
}

-->
</STYLE>

</HEAD>
<BODY STYLE="background-color: #ae0202; margin: 0;">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean in odio quis turpis ullamcorper interdum. Quisque neque lacus, rhoncus dignissim, condimentum non, consectetuer non, quam. Donec viverra eros ac diam. Phasellus nisi ligula, cursus sed, porta ut, auctor at, purus. Duis fermentum massa vitae lectus. Sed tempus condimentum quam. In hac habitasse platea dictumst. Donec quam sem, ultrices non, ornare vitae, dignissim non, massa. Curabitur sit amet purus eu augue eleifend pellentesque. Ut facilisis, augue nec posuere lacinia, neque risus egestas justo, in gravida pede diam a metus. Aliquam mattis adipiscing dui.</p>

<p>Nam tristique tincidunt mauris. Donec commodo fermentum felis. Integer erat. Donec suscipit lectus ut pede. Curabitur eleifend sem ac ante. Praesent commodo nunc eu orci. Quisque at libero sed neque rutrum feugiat. Aliquam erat volutpat. Maecenas aliquet auctor odio. Donec ornare. Cras vestibulum faucibus elit. Quisque eros orci, convallis eu, commodo sed, sagittis in, lorem. Nam tincidunt sagittis eros. Praesent eu mauris eu lacus placerat volutpat. Sed id quam. Maecenas eget justo. Morbi pellentesque euismod risus. Vestibulum quam arcu, sodales at, placerat varius, rutrum eget, dui. Nullam lorem nisl, lobortis ut, consectetuer viverra, rutrum sit amet, nulla.</p>

<p>Integer non arcu in turpis convallis ultrices. Quisque adipiscing nisl at ipsum. Nunc purus dolor, iaculis sed, fermentum nec, vehicula quis, metus. Praesent malesuada magna sed lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed molestie nisl. Quisque vitae velit. Nulla consequat, magna et convallis feugiat, orci ligula fermentum purus, in iaculis tellus odio vitae turpis. Donec adipiscing venenatis neque. Quisque elementum aliquet pede. Sed at nisl. Nulla facilisi. Phasellus molestie, risus id viverra euismod, leo lorem rhoncus ante, sit amet accumsan sapien orci egestas massa. Cras augue ligula, rhoncus eu, aliquet sit amet, luctus at, diam. Mauris pellentesque. Quisque tellus. Etiam porttitor enim vel ipsum. Etiam neque ipsum, feugiat nec, semper quis, malesuada eget, arcu.</p>

<p>Fusce tristique scelerisque mauris. Donec lacinia est quis diam. Suspendisse ultricies. Vivamus magna purus, volutpat vel, fringilla eget, tincidunt sit amet, mauris. Nullam bibendum sem nec magna venenatis rhoncus. Quisque tempus dui non risus. Phasellus gravida, tortor sit amet sollicitudin malesuada, pede velit rhoncus nisl, iaculis lobortis ipsum lectus et sapien. Donec mauris lorem, commodo in, vehicula eu, condimentum porttitor, odio. Maecenas vulputate pede a urna. Cras sem. Fusce lobortis ipsum ac purus. Sed dapibus eros a ante. Nunc dapibus, neque quis molestie congue, pede libero bibendum ligula, et accumsan ligula justo sed nisl. Sed rutrum mi a dolor elementum adipiscing. Duis tristique lectus non lectus pulvinar condimentum.</p>

<p>Proin nibh nisl, faucibus consectetuer, varius at, rutrum vitae, nisl. Quisque arcu. In hendrerit pede at magna. Integer eu nisi eu turpis lobortis consectetuer. Nam a mauris vitae lacus pretium interdum. Suspendisse metus velit, vehicula in, vestibulum quis, dignissim sed, velit. Vivamus felis ipsum, mattis sed, dapibus id, porttitor vel, mauris. Integer vitae lectus at justo vestibulum hendrerit. Sed non massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras lobortis diam ut purus. Sed porta, ipsum vitae hendrerit feugiat, velit massa porttitor odio, eu varius nibh enim id odio. Suspendisse id diam. Maecenas sit amet sem. In lorem risus, sodales facilisis, dapibus non, tempus ut, augue. Nulla erat mi, convallis id, fermentum ut, mattis at, sem. Duis malesuada tellus eget velit. Sed mauris. Fusce id nibh quis arcu adipiscing congue.</p>

<p>Mauris purus. Nullam tincidunt posuere enim. Praesent ornare risus at ante. Ut ullamcorper ipsum et augue. Maecenas eleifend. Vivamus ligula diam, pulvinar vel, cursus iaculis, molestie eu, turpis. Maecenas vulputate enim euismod felis. Proin erat orci, pretium sit amet, commodo sit amet, luctus eget, sem. Mauris iaculis. Nam suscipit libero. Maecenas eget tortor. Maecenas sollicitudin tristique justo. Sed feugiat ultrices nibh. Maecenas ultrices quam nec felis pretium venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi nisl nibh, hendrerit nec, tempus ut, egestas ut, quam. Maecenas nec nisi sit amet arcu malesuada varius. Morbi vel justo sit amet lorem fermentum pulvinar. Duis posuere interdum ligula.</p>

<p>Suspendisse potenti. Suspendisse sem urna, vehicula quis, facilisis et, facilisis eu, tortor. Proin enim lacus, aliquet sit amet, consectetuer at, lacinia at, pede. Fusce dolor. Vestibulum et velit. Cras sit amet sem. Suspendisse potenti. Duis iaculis porttitor urna. Quisque velit massa, ultrices non, imperdiet sed, tristique sit amet, odio. Suspendisse potenti. Donec nibh libero, pretium nec, fermentum consequat, vulputate sit amet, orci. Pellentesque non velit. Vivamus vel tortor. Vivamus eget lectus consectetuer arcu fringilla molestie.</p>

<p>Pellentesque pretium, quam vitae luctus mattis, est lectus semper magna, eget mollis ante sem nec purus. Nam tempus turpis quis mi. Sed bibendum dolor eget sem. In massa arcu, interdum eu, tincidunt eu, accumsan tincidunt, massa. In imperdiet suscipit elit. Phasellus sapien lorem, porttitor nec, elementum ac, fringilla id, justo. Mauris metus neque, volutpat convallis, consequat vel, sagittis in, massa. Nam risus lacus, elementum tristique, euismod ac, iaculis lacinia, urna. Sed quis urna. Praesent pulvinar condimentum arcu. Donec elit. Fusce ante lacus, ultrices in, eleifend in, mollis ut, enim. Sed nisi.</p>

<p>Suspendisse ac risus. Phasellus ut velit. Suspendisse pulvinar elit in ante. Sed eget eros. Phasellus sit amet purus et odio lacinia interdum. Duis neque justo, feugiat a, malesuada in, varius nec, pede. Integer quis odio eleifend libero auctor gravida. Nulla consectetuer, urna vitae pellentesque porttitor, tellus nulla mattis erat, id ultricies magna ipsum eget metus. Sed vulputate. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

<p>Suspendisse potenti. Suspendisse eu nisi. Mauris ut est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur libero dui, aliquam viverra, pharetra in, vehicula in, magna. Donec laoreet aliquet sapien. Maecenas blandit tristique nisi. Fusce tempor. Praesent condimentum nisl. Donec scelerisque, augue sit amet malesuada malesuada, tellus velit molestie urna, sit amet ornare erat elit non turpis. Morbi consectetuer, ligula sit amet auctor vulputate, turpis pede malesuada ipsum, sed tincidunt magna orci non lacus. Curabitur mattis neque nec diam. Mauris rhoncus venenatis turpis. Nam suscipit mauris sed massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras eu erat. Ut ut elit pellentesque massa pellentesque pharetra. Nunc vitae purus sit amet lectus feugiat tincidunt. Nullam aliquet fringilla justo. Nullam mollis.</p>

</div>

</div>
</DIV>
<DIV ID="footer">

<img src="images/footer-top.gif" style="margin-top: -20px;">

 

</DIV>

<DIV ID="footer-bottom">

 

</DIV>

</div>

</div>
</BODY>
</HTML>

Any ideas of what I'm doing wrong?

Thanks,

Terence

Layouts without setting height

tlflow

tlflow

Xapti

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week