No word break in two floating divs

Question

<table class="project-table">
        <thead>
            <tr class="align-top">
                <td class="short-col heading">Project Name</td>
                <td class="short-col heading align-center">Project Id</td>
                <td class="short-col heading">Date &amp; Time</td>
                <td class="short-col heading">Student</td>
            </tr>
        </thead>
        <tbody>


                <tr class="bottom-row-dashed">
                    <td class="long-col">
                            <div class="achievement-box float-left">Winner</div>

                        <div class="float-left margin-left">Intrusion Detection System in Cloud Architecture</div>
                        <div class="clear"></div>
                    </td>
                    <td class="short-col align-center">1</td>
                    <td class="short-col">01 Apr 2014, 09:30 PM</td>
                    <td class="short-col">Sayan Chowdhury</td>
                </tr>
            <tr>
        </tr></tbody>
    </table>

The stylus file:

table.project-table
    font-size: 13px
    margin-top: 10px
    width: 100%
    border-collapse: collapse
    .bottom-row-dashed
        border-bottom: 1px dashed border-color

    .margin-right
        margin-right: 2px
    .margin-left
        margin-left: 2px

    td
        &.short-col
            width: 1%
        &.large-col
            width: 20%
        &.medium-col
            width: 10%
    tr
        &.align-top
            vertical-align: top

The div that contains "Winner" and "Intrusion Detection System in Cloud Architecture" are float left. I added word-wrap:break-word; but it did not help breaking the breaking the term "Intrusion Detection System in Cloud Architecture". The short-col and long-col class defines the width of the table column

How can I break the term "Intrusion Detection System in Cloud Architecture" based on the width.?

EDIT: I want to have "Intrusion Detection System in Cloud Architecture" and "Winner" on the same line but as the word should break off in the middle based on the width

Answer 1

Check out the Demo

I just added a break
tag

 <div class="float-left margin-left">Intrusion Detection<br> System in Cloud Architecture</div>

Output fiddle

Another way

Another way of Doing it

Setting of max width does the trick

 th{
     padding-left:30px;
    }
    td{
     padding-left:30px;
          max-width: 200px; /*or whatever*/
      word-wrap: break-word;
    }
    th:first-child{
        padding-left:0px;
    }
    td:first-child{
        padding-left:0px;
    }

Output using word wrap and max-width

Check this out latest

 display:inline;

Answer 2

Give some width to the first td of first row like: Check the demo:FIDDLE

<table class="project-table">
        <thead>
            <tr calss="align-top">
                <td class="short-col heading" width="200px">Project Name</td>
                <td class="short-col heading align-center">Project Id</td>
                <td class="short-col heading">Date &amp; Time</td>
                <td class="short-col heading">Student</td>
            </tr>
        </thead>
        <tbody>


                <tr class="bottom-row-dashed">
                    <td class="long-col" >
                            <div class="achievement-box float-left">Winner</div>

                        <div class="float-left margin-left">Intrusion Detection System in Cloud Architecture</div>
                        <div class="clear"></div>
                    </td>
                    <td class="short-col align-center">1</td>
                    <td class="short-col">01 Apr 2014, 09:30 PM</td>
                    <td class="short-col">Sayan Chowdhury</td>
                </tr>
            <tr>
        </tr></tbody>
    </table>