Make a message div stay in horinzontal line

HTML & CSS
,
1

Hi Guys,

I am trying to achieve linkedin kind of messaging boss for a project. I want the message div to appear on a horizontal line with the image in one column, the content of the message on the second column and the message time on the third. I have spent hours trying to achieve it and wish to get some help.

Here is a screenshot of what I intend to achieve;

1262×224 51.6 KB

And here is what I have done so far;

1262×224 114 KB

My htlm code so far;

<div class="ui relaxed divided list inquiry-list">
                      <div class="item" style="display: table-row">
                        <div style="display:table-cell"><img class="" src="{{URL::asset('public/assets/img/msg-profile.png')}}" width="38" height="38" /></div>
                        <div class="content" style="display: table-cell; margin-top: 0; padding-top: 0">
                          <a class="header">Semantic-Org/Semantic-UI</a>
                          <div class="description">Updated 10 mins ago</div>
                        </div>
                      </div>
                      <div class="item">
                        <i class="large github middle aligned icon"></i>
                        <div class="content">
                          <a class="header">Semantic-Org/Semantic-UI-Docs</a>
                          <div class="description">Updated 22 mins ago</div>
                        </div>
                      </div>
                      <div class="item">
                        <i class="large github middle aligned icon"></i>
                        <div class="content">
                          <a class="header">Semantic-Org/Semantic-UI-Meteor</a>
                          <div class="description">Updated 34 mins ago</div>
                        </div>
                      </div>
                  </div>

Thanks guys!

2

What about the css? This is a layout question, so we need to see what css you have tried.

3

It seems to be inline, @SamA74 …

4

I see small pieces of in-line, but also many classes, so assume there to be an external css too.

2 Likes
5

@SamA74 thanks for the response. The css is inline. But you were to implement such using the provided layout, how would you create the styling for it.

Would appreciate it if you give me a different view of how I can such feature.

Also, ignore the rest of the ‘item’ class divs. Used inline css to test the look and feel.

Thanks

6

I was somewhat confused by your class names as it seems you do not show any message content, just a header of some sort and the last time it was updeated.

Don’t mind my html, I just want to give an example of the css you can use. 

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Untitled</title>
<style>
.inquiry-list{
    margin:0;
    border:4px solid #069;
    border-radius:4px;
    padding:0;
    width:300px;
    list-style:none;
    font:.8em/1.1 verdana, sans-serif;
}
.inquiry-item{
    display:table;
}
.inquiry-item + .inquiry-item{
    border-top:2px solid #ccc;
}
.msg-icon{
    display:table-cell;
    width:40px;
}
.msg-header{
    display:table-cell;
    width:180px;
    color:#06c;
    vertical-align:middle;
    text-decoration:none;
}
.msg-time{
    display:table-cell;
    width:80px;
    vertical-align:middle;
}
</style>
</head><body>

<ul class="inquiry-list">
  <li class="inquiry-item">
        <span class="msg-icon"><img src="msg-profile.png" width="38" height="38" alt="avatar"></span>
    <a class="msg-header" href="#nogo">Semantic-Org/Semantic-UI</a>
        <span class="msg-time">10 mins</span>
  </li>
  <li class="inquiry-item">
        <span class="msg-icon"><img src="msg-profile.png" width="38" height="38" alt="avatar"></span>
    <a class="msg-header" href="#nogo">Semantic-Org/Semantic-UI-Docs</a>
        <span class="msg-time">22 hours</span>
  </li>
  <li class="inquiry-item">
        <span class="msg-icon"><img src="msg-profile.png" width="38" height="38" alt="avatar"></span>
    <a class="msg-header" href="#nogo">Semantic-Org/Semantic-UI-Meteor</a>
        <span class="msg-time">34 days</span>
  </li>
</ul>

</body></html>
7

It shouldn’t be - once you turn on appropriate security inline CSS will no longer work.

8

Thanks a lot guys. Was able to have it working. I really appreciate the assistance and concern

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.