CSS & Stuff

[Jam-ez]

Hai dar,

Basically, I have some php:

while ( $conversation_object = mysql_fetch_object( $select_conversation ) )
{

// spacing
echo( "<br />" );
//
// header/subject
echo( "<div class='subject'>" . $conversation_object->subject . " : " . $conversation_object->date . "</div>" );
//
// sidebar/picture/motto
$profile_mysql = mysql_query( "SELECT * FROM `user` WHERE `username` = '$conversation_object->poster'" );
$profile_picture = mysql_fetch_object( $profile_mysql );
echo( "<div class='sidebar'>" . $conversation_object->poster . "<br /><img src='" . $profile_picture->picture . "'></img>
<br /><br />
" . $profile_picture->motto . "</div>" );
//
// main post
echo( "<div class='main'>" . $conversation_object->message . "</div>" );
//
// footer
echo( "<div class='footer'></div>" );
//
// spacing
echo( "<br /><br />" );
//

}

The CSS is:

.subject {
padding: 5px 10px;
background-color: #666;
}

.sidebar {
float: left;
width: 134px;
padding: 10px;
background-color: #999;
}

.main {
float: right;
width: 392px;
padding: 10px;
background-color: #CCC;
}

.footer {
float: clear both;
width: 526px;
padding: 10px;
}

However, the output I get is like this:
http://habtown.net/pedmore/?part=show_messages

Which sucks, because the main content and sidebar don't always reach the bottom.

Any idea how I'd go about making the sidebar & main content area reach the footer at all times? Otherwise it just looks messy and they aren't the same size.

Thanks a bunch!
sidenote#: this is happening on google chrome & firefox for sure, not sure about other browsers.

[Meti]

I don't know how to mix PHP with CSS, but I'm not sure about the:
float: clear both; ?

Is that even a code, or have you made it up? :P

Clear: both; is correct?

[lick]

What is the message/news systelm your useing?

[Jam-ez]

I don't know how to mix PHP with CSS, but I'm not sure about the:
float: clear both; ?

Is that even a code, or have you made it up? :P

Clear: both; is correct?

Oh my god! I'm an idiot, clearly.
I'm presuming it isn't code, it sounds a bit dodgy. :P

Well I'll try that quickly and edit this post, thanks a bunch.


What is the message/news systelm your useing?
My own.

Edit: Clearing both seems to cause a big white space :(. Hmm, any ideas how I could make it join on without spacing in between plus reach the footer on both columns?
Edit2: Meti, the HTML code would be:

<div class="subject">Hello : Boo</div>
<div class="sidebar">
My name:
<br />
<img src=''></img>
<br /><br />
Some tag line.
</div>
<div class="main">Message thingy</div>
<div class="footer">Footer</div>
<br /><br />
I believe.

[Jam-ez]

Sorry for double post, can't edit.
New CSS:


#subject {
padding: 5px 10px;
margin: auto;
border: 1px solid gray;
background-color: #FFF;
}

#sidebar {
float: left;
width: 133px;
padding: 10px;
margin: auto;
border-left: 1px solid gray;
background-color: #FFF;
}

#main {
float: right;
width: 390px;
padding: 10px;
margin: auto;
border-right: 1px solid gray;
border-left: 1px solid gray;
background-color: #FFF;
}

#footer {
clear: both;
width: 546px;
padding: 10px;
border: 1px solid gray;
margin: auto;
}

Still, the #main doesn't reach the footer. :(