显示表格的行宽不固定

Question

I'm trying to make the div have same height so i used display table , problem that i having is the width will grow. As an example try adding content in the tableright , when it is exceeded the width , it will not break to the next line but it will expand horizontally to the tableleft.

Please Advice. Below is the sample code

 <div id="maintable">
    <div id="table-row">
    <div id="tableleft></div>
    <div id="tableright></div>
    </div>
    </div>

    <style>
    #maintable
    {display:table;
    width:100%;
    }
    #table-row
    {
    display:table-row
    width:100%;
    }
    #tableleft
    {
    width:60%;
    display:table-cell;
    }
    #tableright
    {
    width:40%;
    display:table-cell;
    }
    </style>

Answer 1

You made few syntax error there.

Further to make sure if one big un spaced word is placed in table-cell i have used "table-layout: fixed;"

check this fiddle: http://jsfiddle.net/5q9K8/17/

The HTML:

<div id="maintable">
    <div id="table-row">
        <div id="tableleft">lorem</div>
        <div id="tableright">ipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsum</div>
    </div>
</div>

The Css:

#maintable
{
    display:table;
    width:100%;
    table-layout: fixed;
    word-wrap:break-word;    
}
#table-row
{
    display:table-row;
    width:100%;
}
#tableleft
{
    width:60%;
    display:table-cell;
    background: #eef;
}
#tableright
{
    width:40%;
    display:table-cell;
    background: #efe;
}

Answer 2

Add width as accordingly here just an example to show div height equal to table height.

css

.maintable {
    width:100%;
    display: table;
    border: 1px solid blue;
}

.maintable .table-row {
    display: table-row;
    border: 2px solid black;
}

.maintable .table-row .tableleft, .maintable .table-row .tableright {
    display: table-cell;
    border: 4px solid red;
}

.tableright {
    width: 60%;
}
.tableleft {
    width: 40%;
}

DEMO

Final DEMO