Table Layout using CSS

Question

I was trying to use table layout with my div. Everything is fine with my config. But, there is a problem with setting min-width. I was trying to use this in forms. Here is the Demo.

When, the divleft label size gets increases, then it should not wrap to the next line until the maindiv width reaches the limit. so it means setting left div min-width as 25% and if the left div content grows, then it should extend the width to fit to the content until it reaches main div width. Pls suggest me how can i do this.

Css Code

.divmain
{
display: table-row;
padding: 12px;
}
.divleft
{
display: table-cell;
vertical-align: top;
padding: 1px;
width: 25%;
}
.divright
{
display: table-cell;
vertical-align: top;
padding: 1px;
}

Answer 1

add two property

.divmain { width:100% }

.divleft { min-width: 25%; }

Note : I also have changed your CSS declaration : see the DEMO

Update

Note: you have missed divright class on first row in your updated demo. now see

.divleft
{
    display: table-cell;
    vertical-align: top;
    padding: 1px;
    min-width: 35%;
}
.divright
{
    display: table-cell;
    vertical-align: top;
    padding: 1px;
}

Updated DEMO