How to change the view in this form? - html

Question

Following this post , I try to imply the style -
.mktoFormRow:nth-child(odd) {
float: left;
}
on the follow form -
<form id="mktoForm_17" novalidate="novalidate" class="mktoForm mktoHasWidth mktoLayoutLeft" style="font-family: inherit; font-size: 13px; color: rgb(51, 51, 51); width: 171px;" __biza="WJ__">
<input type="hidden" id="country" name="country" value="Israel"><input type="hidden" id="00Nw0000003PHyq" name="00Nw0000003PHyq" value=""><input type="hidden" id="00Nw0000003PHyx" name="00Nw0000003PHyx" value=""><input type="hidden" id="00Nw0000003PHyz" name="00Nw0000003PHyz" value=""><input type="hidden" id="00Nw0000003PHyy" name="00Nw0000003PHyy" value=""><input type="hidden" id="00Nw0000003PHyl" name="00Nw0000003PHyl" value=""><input type="hidden" id="00Nw0000003PHyr" name="00Nw0000003PHyr" value=""><input type="hidden" id="00Nw0000003PHyn" name="00Nw0000003PHyn" value=""><input type="hidden" id="00Nw0000003PHyo" name="00Nw0000003PHyo" value=""><input type="hidden" id="00Nw0000003PHyv" name="00Nw0000003PHyv" value=""><input type="hidden" id="00Nw0000003PHyp" name="00Nw0000003PHyp" value=""><input type="hidden" id="00Nw0000003PHyu" name="00Nw0000003PHyu" value=""><input type="hidden" id="00Nw0000003PHys" name="00Nw0000003PHys" value=""><input type="hidden" id="00Nw0000003PHym" name="00Nw0000003PHym" value=""><input type="hidden" id="00Nw0000003PHyw" name="00Nw0000003PHyw" value=""><input type="hidden" id="00Nw0000003PHyt" name="00Nw0000003PHyt" value="http://localhost/codefuel/">
<style type="text/css"></style>
<div class="mktoFormRow">
<div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 5px;">
<div class="mktoOffset" style="width: 5px;"></div>
<div class="mktoFieldWrap mktoRequiredField">
<label for="FirstName" class="mktoLabel mktoHasWidth" style="width: 10px;">
<div class="mktoAsterix">*</div>
</label>
<div class="mktoGutter mktoHasWidth" style="width: 5px;"></div>
<input id="FirstName" name="FirstName" placeholder="Name" maxlength="255" title="" type="text" class="mktoField mktoTextField mktoHasWidth mktoRequired mktoInvalid" style="width: 150px;">
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow">
<div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 5px;">
<div class="mktoOffset" style="width: 5px;"></div>
<div class="mktoFieldWrap mktoRequiredField">
<label for="PersonEmail" class="mktoLabel mktoHasWidth" style="width: 10px;">
<div class="mktoAsterix">*</div>
</label>
<div class="mktoGutter mktoHasWidth" style="width: 5px;"></div>
<input id="PersonEmail" name="PersonEmail" placeholder="Email" maxlength="80" type="email" class="mktoField mktoEmailField mktoHasWidth mktoRequired" style="width: 150px;">
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow">
<div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 5px;">
<div class="mktoOffset" style="width: 5px;"></div>
<div class="mktoFieldWrap mktoRequiredField">
<label for="Application_Download_Link__c" class="mktoLabel mktoHasWidth" style="width: 10px;">
<div class="mktoAsterix">*</div>
</label>
<div class="mktoGutter mktoHasWidth" style="width: 5px;"></div>
<input id="Application_Download_Link__c" name="Application_Download_Link__c" placeholder="Software URL" maxlength="255" type="url" class="mktoField mktoUrlField mktoHasWidth mktoRequired" style="width: 150px;">
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow">
<div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 5px;">
<div class="mktoOffset" style="width: 5px;"></div>
<div class="mktoFieldWrap mktoRequiredField">
<label for="Daily_Installs__c" class="mktoLabel mktoHasWidth" style="width: 10px;">
<div class="mktoAsterix">*</div>
</label>
<div class="mktoGutter mktoHasWidth" style="width: 5px;"></div>
<select id="Daily_Installs__c" name="Daily_Installs__c" class="mktoField mktoHasWidth mktoRequired" style="width: 150px;">
<option value="">Select...</option>
<option value="0-100">0-100</option>
<option value="100-500">100-500</option>
<option value="500-1,000">500-1,000</option>
<option value="More than 1,000">More than 1,000</option>
<option value="Not Applicable">Not Applicable</option>
</select>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoButtonRow"><span class="mktoButtonWrap mktoNative" style="margin-left: 110px;"><button type="submit" class="mktoButton">Submit</button></span></div>
<input type="hidden" name="formid" class="mktoField mktoFieldDescriptor" value="17"><input type="hidden" name="munchkinId" class="mktoField mktoFieldDescriptor" value="955-BUF-612">
</form>
but nothing got change in the view (here the Demo) .
There is 4 <div class="mktoFormRow"> there .
How could I achieve the view as the result here using nth-child selector ?

Answer 1

Your form has an explicit width of 171px, so those divs don't have enough space to be placed on the same line. Just remove the explicit width, so it will default to 100% (and you probably want even children to be left-floated instead of odd ones).
Solution: http://jsfiddle.net/c4YL4/18/

Answer 2

I will change pretty munch of your code, but, you could display every <div class="mktoFormRow"> as an inline-block and float everything to the left... you will get an horizontal line of those divs. then you could use nth-child(2nd) to clear right every two divs and you will get rows of 2 divs each one... I hope this help.