Andrew Ferguson Andrew Ferguson - 1 year ago 42
CSS Question

Placing two columns beside each other in a partial view

I am working on a partial in MVC that contains a form in tow columns. However, one of the forms sits below the other. Here is my code.

<div class="row">

<div id="partialColumn1" class= "col-md-12">

<div class="field padding-left-40">
<label>First Name:</label>
<input id="add_Client_firstName-1" name="add_Client_firstName-1" type="text" value="[First Name goes here ]">
</div>

<div class="field padding-left-40">
<label>Last Name:</label>
<input id="add_Client_lastName-1" name="add_Client_LastName-1" type="text" value="[Last Name goes here ]">
</div>


<div id="partialColumn2" class="col-md-12">
<div class="field padding-left-40">
<label>Referral Date:</label>
<input id="add_Client_referralDate-1" name="add_Client_referralDate-1" type="Date" />
</div>


</div>
</div>
</div>
</div>


And the CSS for my two columns.

#partialColumn1{
float: left;
display: inline-block;
}
#partialColumn2{
display: inline-block;
float: right;
}


I am relatively new to this, it's my first project, so any advice is welcome.

Answer Source

#partialColunm2 is nested in #partialColumn1 ;) Try putting #partialColumn2 outside of #partialColumn1 :D

At least it worked for me.

DEMO: https://codepen.io/Chesswithsean/pen/gWZGGL

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download