footer problem and small alignment issues in IE v6 and earlier

Hey everyone!

Ok, I’ve stripped my website of all graphics and formatting to make the code as easy to view as possible, but I’m at a loss. I can’t really explain it that well so here’s the link:

[url]http://theinfamousuk.com/basic.htm[/url]

When this page is viewed in Firefox, it looks exactly as it’s supposed to. When viewed in IE 7 + 8, the text in the footer at the bottom of the page is cut in half. I have no idea why! To add insult to injury (lol), when I view the page in IE 6 and lower, the layout gets a little sloppy. Its as if its all aligned to the left apart from my #content.

I have a feeling it has something to do with either my #container, or something to do with floats and my .clearfloat ? I have no clue. I do think that my little footer problem will solve its self when the layout is secure.

I’ve tried scouring the internet for answers, but if you’re not sure on what question to ask, it’s tricky

I really hope you guys can point me in the right direction – I’ve been at this for days now!

Here is the relevant CSS from the head of the page:

[code]
<style type=”text/css”>
<!–
body {
margin: 0;
padding: 0;
text-align: center;
color: #FBFBFB;
background-color: #FFF;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: center center;
}
#container {
width: 680px;
margin: 0 auto;
padding: 40px 0 15px 0;
}
#banner {
height: 165px;
width: 680px;
background-color: #999;
}
#navbar{
width:720px;
height:30px;
position: relative;
right: 20px;
background-color: #666;
}
#sidebar {
float: left;
width: 176px;
padding: 10px 10px 5px 10px;
height: 400px;
background-color: #1b1b1b;
border-left-width: 2px;
border-left-style: solid;
border-left-color: #FE4343;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #FE4343;
display:inline
}
#content {
padding: 10px 10px 5px 10px;
height: 400px;
width: 458px;
background-color: #0C0C0C;
overflow: auto;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #FE4343;
color: #FFF;
float: right;
display: inline;
}
#footer {
height: 20px;
background-color: #1B1B1B;
}
.clearfloat {
clear:both;
height:0;
line-height: 0px;
}
.footertxt {
font-size: 10px;
text-align: right;
color: #828282;
margin: 0;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
}
–>
</style>
[/code]

and here is the html in the body:

[code]
<div id=”container”>
<div id=”banner”>
<!– (the banner image will go here) –></div>
<div id=”navbar”>
<!– (nav bar (rollover images) will go here) –></div>
<div id=”sidebar”>
<!– end #sidebar –></div>
<div id=”content”>
<div><h1>——- News ——-</h1></div>
<div>
<h4>Feburary 10, 2009</h4>
<h5>New website needs to be finished!</h5><hr width=”95&#37;”/></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Aenean sagittis. http://www.this-is-another-very-ver-ver-ver-ver-ver-very-long-unbreakable-URL.co.uk </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. orem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. orem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. orem ipsum dolor sit amet, consectetuer adipiscing elit.Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. </p>
<!– end #content –></div>
<div id=”footer” class=”clearfloat”>
<p class=”footertxt”><!– #BeginLibraryItem “/Library/copyright.lbi” –>theinfamousuk.com | &#169; Copyright 2009 | All rights reserved | Contact<!– #EndLibraryItem –></p>
<!– (will have an image as the background) –></div>
<!– end #container –></div>
</body>
[/code]

I know that I ‘ve posted here before, but I thought i’d try again after revising my code and strippng it of everything to try to narrow down the problem!

I hope you guys can help – i have no clue what to do!

Also in #CSS _↴