0

I want to split every row with two columns, and first div width depends on text width, the remaining full width will be assign to second div. I have attached my sample form design.

enter image description here

3
  • 1
    What about a jsfiddle with your current DOM and CSS?
    – Itay
    Sep 16, 2013 at 7:44
  • Do you want label on 1st div and input on 2nd? Sep 16, 2013 at 7:46
  • yes. first div label, second div will be input field
    – Velmurugan
    Sep 16, 2013 at 8:57

2 Answers 2

1

using flex-box, you can do it like this:

Working Fiddle Tested on: Chrome, IE10, FF (that wht the CSS looks so messy)

HTML:

    <div class="Row">
        <div class="label"><label>short</label></div>
        <div class="input"><input type="text" value="text goes here" /></div>
    </div>
    <div class="Row">
        <div class="label"><label>this is a long label</label></div>
        <div class="input"><input type="text" value="text goes here" /></div>
    </div>

CSS:

*
{
    padding: 0;
    margin: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.Row
{
    border: 1px solid black;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

    .Row > div
    {
        -webkit-align-self: auto;
        -ms-flex-item-align: auto;
        align-self: auto;
    }

.label
{
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    /*apply padding if you want*/
}

.input
{
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    /*apply padding if you want*/
}
.input input
{
    width: 100%;
}
0
0

li .div1{float:left;} li .div2{*zoom:1;overflow:hidden;}

1
  • some further explanation would help the OP
    – dove
    Sep 16, 2013 at 8:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.