div内部左右对齐

Question

I am trying to design the layout in the below screenshot

I tried to implement the same in fiddle

http://jsfiddle.net/NNLct/1/

<div  id="CorpDealerSearch" >
  <div class="left"> DealerName </div>
  <div class="left"> Region </div>
  <div class="left"> DealerCode </div>
  <div class="left"> Area </div>
  <div class="left">
    <input type="text"/>
  </div>
  <div class="left">
    <input type="text"/>
  </div>
  <div class="left">
    <input type="text"/>
  </div>
  <div class="left">
    <input type="text"/>
  </div>
</div>

Please help in suggesting proper css to get the design

Answer 1

Have a look at this FIDDLE

HTML

<div class='table'>
    <div class='row'>
        <div class='cell'>DealerName
            <input type='text' />DealerCode
            <input type='text' />
        </div>
        <div class='cell'>Region
            <input type='text' />Area
            <input type='text' />
        </div>
    </div>
</div>

CSS

body{
    width:100%;
    padding:0;
    margin:0;
    box-sizing:border-box;
}
.table {
    display:table;
    width:100%;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;

    padding-right:20px;
}
input {
    display:block;
    width:100%;
}

Answer 2

Try something else:

http://jsfiddle.net/Ta6Qk/

HTML

<div class="main">
    <div>
        <label>Data</label>
        <input type="text" value="">
    </div>

    <div>
        <label>Data</label>
        <input type="text" value="">
    </div>

            <div>
        <label>Data</label>
        <input type="text" value="">
    </div>

    <div>
        <label>Data</label>
        <input type="text" value="">
    </div>
</div>

and CSS

.main {
    width: 400px;
    position: relative;
}

.main div {
    border: none;
    display: inline-block;
    width: 44%;
    margin-right: 3%;    
}

input {
    width: 100%;
}

label {
    display:block
}

Answer 3

You have to include label and input in the same div: http://jsfiddle.net/NNLct/5/

Don't forget you can also use label tags to associate the text to the related input.

 <div id="CorpDealerSearch" >

    <div class="left">
    DealerName <input type="text"/>
    </div>

    <div class="left">
    Region <input type="text"/>
    </div>

    <div class="left">
    DealerCode <input type="text"/>
    </div>

    <div class="left">
    Area <input type="text"/>
    </div>

</div>

CSS:

.left 
{
float:left;
}

Answer 4

Going by your existing markup, here is a : DEMO

Float the elements and after every 2 element, clear the float s, as simple as that!! :)

CSS

.left {
    float:left
}
.clr{clear:both}

HTML

<div id="CorpDealerSearch">
    <div class="left">DealerName
        <br />
        <input type="text" />
    </div>
    <div class="left">Region
        <br />
        <input type="text" />
    </div>
    <div class="clr"></div>

    <div class="left">DealerCode
        <br />
        <input type="text" />
    </div>
   <div class="left">DealerCode
        <br />
        <input type="text" />
    </div>

</div>

Answer 5

See this fiddle:

http://jsfiddle.net/NNLct/16/

Using display:table; display:table-row; display:cell;

Answer 6

First I would change the html to:

HTML

<div  id="CorpDealerSearch" >
<div>
<label for="dealerName">DealerName</label>
<input type="text" id="dealerName" name="dealerName">       
<label for="Region">Region</label>
<input type="text" id="Region" name="Region">
</div>  
<div>
<label for="DealerCode">DealerCode</label>
<input type="text" id="DealerCode" name="DealerCode">       
<label for="Area">Area</label>
<input type="text" id="Area" name="Area">
</div>
</div>

And the css would be:

CSS

#CorpDealerSearch label, input{
 float:left;
 clear:both;
}
#CorpDealerSearch div{
 display:block;
 float:left;
 width:200px;    
}

hope this will help.

Answer 7

Here's the fiddle: Check this

Here's the HTML Code:

<div id="container">
    <div id="left" class="left">
        <div id="top-left" class="innerdiv">
            <div id="lbl-tl">
                Dealer Name:
            </div>
            <div id="txt-tl">
                <input type="text" style="width: 90%;" />
            </div>
        </div>
        <div id="bottom-left" class="innerdiv">
            <div id="lbl-bl">
                Dealer Code:
            </div>
            <div id="txt-bl">
                <input type="text" style="width: 90%;" />
            </div>
        </div>
    </div>
    <div id="right" class="right" >
        <div id="top-right" class="innerdiv">
            <div id="lbl-tr">
                Region:
            </div>
            <div id="txt-tr">
                <input type="text" style="width: 90%;" />
            </div>
        </div>
        <div id="bottom-right" class="innerdiv">
            <div id="lbl-br">
                Area:
            </div>
            <div id="txt-br">
                <input type="text" style="width: 90%;" />
            </div>
        </div>
    </div>
</div>

And here's the CSS:

    *
    {
        margin: 0px;
        padding: 0px;
    }
    #container
    {
        width: 700px;
        min-height: 150px;
    }

    .left
    {
        width: 49%;
        min-height: 150px;
        float: left;
    }

    .right
    {
        min-height: 150px;
        width: 49%;
        float: right;
    }

    .innerdiv
    {
        height: 75px;
    }