vineeth vineeth - 12 days ago 8
CSS Question

Label element placement in HTML

I wanna put a label("country") below a select statement("country dropdown") and no matter what I try I just couldn't make it happen. I am new to web design. Any advice would be awesome. Thank you.

enter image description here

If you see the bottom right, you'll see country label next to the dropdown. I want it under it like the rest of the code.

<div class="form-group">
<div class="col-xs-4" style="padding-left:0px">
<input class="form-control" type="text" maxlength="5">
<label class="description">Postal/Zip code</label>
</div>

<div class="countryDropdown col-xs-4" style="float:right" >
<select name="dropdown" id="myCountry">
<option value="select">Please Select</option>
<option value="US">United States</option>
<option value="UK">United Kingdom</option>
<option value="INDIA">India</option>
</select>
<label class="description" >Country</label>
</div>

Answer

Try the below css

  #myCountry{
    width: 100%;
  }
  .countryDropdown label{
    clear: both;
  }