[RESOLVED] Problem with css - can't align the text

[akhileshbc]

Hi

I'm kind of making my own chat. And it's so far tested and working.
So, I tried to give a pleasing look by adding some CSS. I have made a photoshop design and I'm implementing it as CSS and HTML.

The problem is, when a chat message is displayed, I want to display the avatar, followed by the date and time and username + msg.
But I'm having trouble with the username+msg part, which should in a line below the date and time. I have attached a image. The first msg row is what my current css renders. And what I want to achieve is shown in the second row(the red text)

I hope I didn't confused you.

HTML:

<div id="chatwrapper">
                    <div class="chatbox">
                        <div class="avatar">
                            <img src="akhileshbc.png">
                        </div>
                        <span class="chat_date">
                            Oct 22, 2011 9:50 AM
                        </span>
                        
                        <span class="chat_msg">
                            Hi, how are you guys....hhsadalkjdlasdjlkasd
                            asdkalskdjaljdlasd
                            asdlasdklasldkjaskdjlkasd
                            asdasioduouasdasudoiusaoduoasudusaodsauoduasodusaod
                            saldjksadjlsadlskaldhhsadlsa
                        </span>
                    </div>
                                        <!-- end of first chat row -->
 
                    <div class="chatbox">
                        <div class="avatar">
                            <img src="akhileshbc.png">
                        </div>
                        <span class="chat_date">
                            Oct 22, 2011 9:50 AM
                        </span>
                        
                        <span class="chat_msg">
                            Hi, how are you guys....hhsadalkjdlasdjlkasd
                            asdkalskdjaljdlasd
                            asdlasdklasldkjaskdjlkasd
                            asdasioduouasdasudoiusaoduoasudusaodsauoduasodusaod
                            saldjksadjlsadlskaldhhsadlsa
                        </span>
                    </div>
.......

CSS for that portion:

/* other css here... */
 
#abcechat #inside #mid #chatwrapper
{
    width: 647px;
    height: 460px;
    overflow:auto;
    /*border: 1px solid black;*/
}
 
#abcechat #inside #mid #chatwrapper .chatbox
{
    background: url(images/chatbox_back.png) repeat-x;
    
    min-height: 47px;
    
    /*border: 1px solid black;*/
    
    
    
}
 
#abcechat #inside #mid #chatwrapper .chatbox .avatar
{
    
    float:left;
    margin:0px;
    
    background: url(images/avatar_back.png) no-repeat;
    width: 50px;
    height: 50px;
    
    /*border: 1px solid black;*/
    
    
}
 
#abcechat #inside #mid #chatwrapper .chatbox .avatar img
{
    width:33px;
    height:33px;
    
    margin-top:8px;
    
}
 
#abcechat #inside #mid #chatwrapper .chatbox .chat_date
{
    float:left;
    padding: 1px 0px 0px 3px;
    display:inline;
    font-size: 10px;
    color: #088ffd;
    clear:right;
    height:12px;
    
    border: 1px solid black;
}
 
#abcechat #inside #mid #chatwrapper .chatbox .chat_msg
{
 
    padding: 2px 0px 0px 3px;
    float:left;
    font-size: 12px;
    color: #5f5f5f;
    
    border: 1px solid black;
}
 
 
 
.clear_l
{
    clear:left;
}
.clear_r
{
    clear:left;
}
.clear
{
    clear: both;
}

[akhileshbc]

Ok... I have somewhat resolved the problem.

What I did is, used inline display for the date and then for chat_msg, I used a relative positioning and enclosed the msg in <p> tag. And have done some minor adjustments.

So far, it's working good in Google Chrome and Firefox.

I have attached the screenshot that I took while testing my chat. Since my exams starts after 4 days, none of my friends were online. So, I tried chatting myself.

[Justa Lol]

Good luck with the exam! Hope you don't develop multi-personalities...

[akhileshbc]

Good luck with the exam! Hope you don't develop multi-personalities...

Thanks

[Aash]

hey Akhilesh, best of luck for exams

[akhileshbc]

hey Akhilesh, best of luck for exams

Thanks

I have attached a screenshot of my chat application(with new look). Some of my friends tested it too and it seems going good.

I used PHP+mySql+jQuery.

[Aash]

I have attached a screenshot of my chat application(with new look). Some of my friends tested it too and it seems going good.

I used PHP+mySql+jQuery.

well done, it's awesome

[akhileshbc]

well done, it's awesome

Thanks