Stuck in simple css formatting

**Norberd** · 25-10-2008

Hi,
Somehow I am not able to make this work.

I need to show a div block containing a message title, it's body, the username and date
I need to show multiple such messages on the page, one under another
I need to show the username and date to the right of the message and its title... so i tried putting down the css, but its just not working.

Secondly, the page number on the bottom should be coming at the end under the last message...currently its coming in the same row as the message itself.

here is the html... can somebody please help me out on this?

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> website</title>

<style >
..message {
width=50px;
text-align:center;
//color:#778899;
//background:#FFFFCC;
font-size:smaller;
border-bottom:1px solid #778899;
margin: 0 auto;
float:top;
}

#pagenumbers {
text-align:center;
}

..mcol1 {
width=50%;
float:left;
display: inline;
}
..mcol2 {
width=50%;
float:left;
display: inline;
}
</style>
</head>
<body>
<div id="content">
<div id="header">
<div id="header_txt">.</div>

</div>
<div id="nav">
<table border="0" cellpadding="0" cellspacing="0" id="navigation">
<tr>
<td class="navText" ><a title="View messages already posted by
other members" href="">VIEW </a></td>
<td class="navText" ><a title="Check out the pictures shared
by others" href="">VIEW </a></td>

</tr>
</table>
</div>
<div id="body">

<p>dfh dhsugfsufog sudf gsudfgsfuysgaf suyfgsfuysffgzyusgffg ugy g</
p>


<div class="message">
<div class="mcol1">
<div class="subject">A new subjecvt</div>
<div class="body">and this is sem long message lets see how it
wraps.<br />
This is now a new paragraph to test line breaks.<br />
<br />
A new line AND a new para </div>
</div><div class="mcol2">
<div class="poster">saurabh</div>
<div class="posted">2008-10-17 13:47:06</div>

</div>
</div>
<div class="message">
<div class="mcol1">
<div class="subject">A new subjecvt</div>
<div class="body">and this is sem long message lets see how it
wraps.<br />
This is now a new paragraph to test line breaks.<br />
<br />
A new line AND a new para </div>
</div><div class="mcol2">
<div class="poster">saurabh</div>
<div class="posted">2008-10-17 13:47:11</div>

</div>
</div><div id="pagenumbers">

<a href="viewmessages.php?p=">&lt;</a>
<a href="viewmessages.php?p=1">1</a>
<a href="viewmessages.php?p=2">2</a> 3
<a href="viewmessages.php?p=4">4</a>
<a href="viewmessages.php?p=">&gt;</a>
</div>
</div>
</div>
</body>
</html>

**Sylvester.S** · 25-10-2008

It doesn't need to be complicated. float the username and date right, the message and title left. Use 'clear:both; on each div block.
The above answers I gave based on your question, I have not looked at the HTML / CSS.

**Addison_12** · 25-10-2008

Hope you will get all the necessary guidelines from here.
http://www.saurabhkumar.com/rac/xsch...ewmessages.php

**Norberd** · 25-10-2008

Thanks to you, that most of the intended formatting works now.

Only question now, why is my border-bottom:1px solid #778899; not
working to create an underline below each message? Thanks.