Question

CSS:

.jC2_Container{
}
.jC2_EventWrapper
{
    border-right:1px solid #CDC3FF;
    height:20px;
    width:250px;
}
.jC2_EventNum
{
    float:left;
    font-family: Arial, verdana;
    text-align:center;
    font-size:12px;
    background-color: #ffffff;
    color:#c0c0c0;
    width:20px;
    height:20px;
    line-height:20px;
}
.jC2_EventObject
{
    font-family: Arial, verdana;
    font-size:12px;
    background-color:#F3F1FF;
    padding-left:30px;
    float:left;
    height:20px;
    line-height:20px;
    border-left:5px solid #CDC3FF;
    border-top:1px solid #CDC3FF;
    padding-right:20px;
}
.jC2_Break{
    width: 1px;
    height: 16px;
    background-color:#CDC3FF;
    float:left;
}
.jC2_EventDescription{
    float:left;
    font-family: Arial, verdana;
    font-size:12px;
    border-top:1px solid #CDC3FF;
    line-height:20px;
    padding-left:20px;
    display:inline-block;
}

HTML:

<div class="jC2_Container">
    <div class="jC2_EventWrapper">
        <div class="jC2_EventNum">1</div>
        <div class="jC2_EventObject">System</div>
        <div class="jC2_Break"></div>
        <div class="jC2_EventDescription">Every tick</div>
    </div>
</div>

The top border above “Every tick” needs to extend to the far right border, I’m a bit stuck can anyone help?

EDIT after conferring with a few others, we decided you really only need the CSS and the <div> in question here, and then the JSFiddle from below

Answer 1

You have to set .jC2_EventObject and .jC2_EventDescription‘s width .

Wrapper's width is : 250px.

EventNum's width is : 20px.
Break's width is : 1px;
So, EventObject + EventDescription's total width should be : 250-21=229px
ALSO , YOU HAVE TO CALCULATE paddings, borders etc. Welcome to REAL WORLD !

🙂