CSS styling issue help required - html

Question

I have the below code for html and css,
My formcontainer width is : 740px;
form width is width:100%;
in equal class i have put 4 div's in a single line,
.equal {
float:left;
width:24.9%;
}
I have effect class applied to all form elements,
.effect {
border:1px solid #ccc;
height: 20px;
padding:3px;
width:97%;
font-size:14px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
If I set width 25% to equal class and width 100% to effect class all
form elements stick to one other.
Want to know what kind off CSS setting should I have so that even
after setting effect class to 100% I have spaces left between the
two elements. (Remember: effect class is applied to all form
elements)
Also if I apply class effect to textbox name the text box goes out
of the form.
My JSFiddle
JSFiddle
<div class="formcontainer">
<form id="personal_details" name="personal_details">
<fieldset class="border">
<legend>Details</legend>
<fieldset class="no_border">
<div class="equal">
<label>City</label>
<br />
<select class="effect" name="city" id="city" style="width:90%">
<option>Select</option>
<option>Bhubhaneshwar</option>
</select><span id="cityInfo">Valid City</span>
</div>
<div class="equal">
<label>State</label>
<br />
<select class="effect" name="state" id="state" style="width:90%">
<option>Select</option>
<option>Jammu & Kashmir</option>
</select> <span id="stateInfo">Valid State</span>
</div>
<div class="equal">
<label>Country</label>
<br />
<select class="effect" name="country" id="country" style="width:90%">
<option>Select</option>
<option>India</option>
</select><span id="countryInfo">Valid Country</span>
</div>
<div class="equal">
<label>Pincode.</label>
<br />
<input type="text" name="pincode" id="pincode" class="effect" style="width:90%" maxlength="6" /><span id="pincodeInfo">Valid Pincode please</span>
</div>
</fieldset>
<fieldset class="no_border">
<div>
<label>Name.</label>
<br />
<input type="text" name="name" id="name" class="effect" style="width:90%" maxlength="6" /><span id="pincodeInfo">Valid Pincode please</span>
</div>
</fieldset>
</fieldset>
</form>
</div>
CSS
.formcontainer {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 0 4px #ccc;
-webkit-box-shadow: 0 0 4px #ccc;
-moz-box-shadow: 0 0 4px #ccc;
border:1px solid #ccc;
padding:15px;
width: 740px;
margin:0 auto;
}
form {
margin:0 auto;
text-align:left;
width:100%;
background:#fff;
font-family:Calibri;
height: auto;
}
.effect {
border:1px solid #ccc;
height: 20px;
padding:3px;
width:97%;
font-size:14px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.equal {
float:left;
width:24.9%;
}
#personal_details span {
margin-left: 50px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
margin: 0 auto;
display:none;
}
fieldset.no_border {
overflow:hidden;
border:0;
padding:0 0 10px 0;
margin:0;
}
fieldset.border {
overflow:hidden;
border:1;
-moz-border-radius:5px;
border-radius: 5px;
-webkit-border-radius: 5px;
margin:3px 0;
padding:10px;
border:solid 1px #ACACAC;
}

Answer 1

I have took a look at your fiddle and when applying the 25% to the width CSS on the .equal and making the width of the .effect 100% nothing seems to have changed. It all seems to work fine and not stick together like you stated. I'm unsure as to what problems you are facing as the fiddle seems to be running fine with the desired percentages.