float clear (after faux columns) help

I just don't get it. Could you please take a look at here (http://www.croatiankid.com/test/) and tell me what to add to my css where? Here's the css:body
{
margin:20px;
padding:0px;
text-align: center; /* gay IE5, very gay... */
font-family:Arial, Helvetica, sans-serif;
background: #767676;
}
#main
{
text-align:left; /* fixing IE5's mess */
width:770px;
margin:0px auto;
background: url(images/bg.gif) repeat-y 50% 0;
}
img
{border:none; padding:0px; margin:0px;}
h1
{
color:#ffa500;
font-size:54px;
position:relative; left:45px; top:55px;
margin:0px;
}
h2
{
color:#666666;
margin:0px;
font-size:24px;
position:relative; left:45px;
margin-top:65px;
}
#content
{
font-size:17px;
float:left;
padding:30px 50px 20px 30px;
background:#999933;
width:472px;
/*990*/
}
#left
{
/*1040*/
width:218px;
float:left;
background:#b97040;
}
p
{margin:0px;margin-bottom:22px; padding:0px; color:#000000; font-size:18px; text-align:justify;}
h3
{
font-size:23px;
margin:0px 0px 22px 0px;
color:#dddddd;
background:#003366;
display:inline;
}
h1,h2,h3
{
cursor:default;
}
#footer
{
border: 2px inset #FF9900;
border-top:none;
background:#003366;
font-size:14px;
padding: 0px 10px;
text-align:center;
color:white;
}
#header
{
height:200px;
background:url(images/header.jpg) no-repeat top;
text-align:center;
}
a:link
{color:#CCFFFF; text-decoration:none;}
a:visited
{color:#CCFFFF; text-decoration:none;}
a:hover
{color:#aaFFFF; text-decoration:none;}
a:active
{color:#CCFFFF; text-decoration:none;}
.contact {margin:3px 0px; padding:3px 0px;}
textarea {
font-family: Verdana, Arial;
font-size: 12px;
color: #000000;
width: 300px;
background-color: #FFFFCC;
border: 2px inset #CCCCCC;
overflow:auto;
}
.input
{
border: 2px inset #CCCCCC;
background-color: #FFFFCC;
font-family: Verdana, Arial;
font-size: 12px;
}
.submit{font-size:14px;}
the faux columns part is in red. so what's the problem now (in non-IE browsers)? i understand i need to clear my floats (which i don't get). Also, I read that paddings could be a problem, which I have (paddings). thanks

Add clear:both; to your footer CSS. Get rid of that id="faux" div. Its not needed. You should probably read this http://www.positioniseverything.net/easyclearing.html

magic. I didn't understand the whole deal with :after, and display:block etc. I actually uploaded the wrong file, where the #faux div was left over.

Modern browsers will understand :after. I don't think IE7 does. Here is how it works. You would put this in your CSS
.clearfix:after {
content:".";
display:block;
height: 0;
clear: both;
visibility: hidden;
line-height:0px;
font-size:1px;
}
then on your #main div you would add class="clearfix" like so
<div id="main" class="clearfix">
what this does is creates another little element that acts as a clear:both. Its done this way to avoid extra markup. IE6 doesn't support this but it doesn't really care about the floats either. I'm not sure if it works in IE7. I haven't tried it.

oh i understand. could you please take a look at this (http://www.croatiankid.com/tarnow/ok.html) and this (http://www.croatiankid.com/tarnow/error.html) in IE6?
the first one has a 2 second redirect, so you should press stop. the problem is that when the right div is shorter than the left one, the footer coms up. how can i fix this?

I guess IE needs the clearing div. Add this just before your footer div
<div class="clear">&nbsp;</div>
then add this to your CSS
.clear {
clear:both;
line-height:0px;
font-size:0;
}

well that's... [censor]. do you think <div id="left">
<img src="images/people.jpg" alt="">
</div> has to do with it? it's really a decorative image, but I don't know how to get it to look like this without the IMG, could you help me with that? I know it's off topic to this thread but 1) I need help on it and 2) who knows it might be the reason to have to add the extra div (which I definitely don't like, if it can be avoided with a practical work-around like changing this. this is actually an extra div itself)

by the way, concerning the "solution" with the clearing div, if I use that, do I still need clear:both; for the footer div?

No you won't need clear:both; on the footer anymore. As for the left div just make that image a background image.
<div id="left">&nbsp;</div>
#left {
width:218px;
height:272px;
float:left;
background:#b97040 url(images/people.jpg) no-repeat;
}