Left and right alignment inside div - html

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 floats, 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

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;
}

Answer 7

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.