NotificaitonRow

by ksevksev

HTML

<div class="background">
    <div class="ims360-notification">
        <div class="ims360-notificaionPriority">icon</div>
        <div class="ims360-notificaionSubject">subject</div>
        <div class="ims360-notificaionCreateDate">create date</div>
        <div class="ims360-notificaionMessage">message</div>
        <div class="ims360-notificaionDelete">X</div>
    </div>
    <div class="ims360-notification">
        <div class="ims360-notificaionPriority">icon</div>
        <div class="ims360-notificaionSubject">long subject</div>
        <div class="ims360-notificaionCreateDate">create date</div>
        <div class="ims360-notificaionMessage">really long message really long message really long message really long message really long message really long message really long message really long message really long message really long message really long message </div>
        <div class="ims360-notificaionDelete">X</div>
    </div>
</div>

CSS

.background
{
    background-color: #e8f1f2;
    overflow:hidden;
}
.ims360-notification
{
    background-color: white;
    margin: 10px;
    width: 98%;
    overflow:hidden;
    clear:both;
}
.ims360-notificaionPriority,
.ims360-notificaionSubject,
.ims360-notificaionCreateDate,
.ims360-notificaionMessage,
.ims360-notificaionDelete
{
    border: 1px grey solid;
    float:left;
    padding-left: 5px;
    padding-right: 5px;
}
.ims360-notificaionPriority
{
    width:25px;
}
.ims360-notificaionSubject
{
    width:25%;
}
.ims360-notificaionCreateDate
{
    width:80px;
}
.ims360-notificaionMessage
{
    width:50%;
}
.ims360-notificaionDelete
{
    float: right;
    width: 20px;
}