How to style webform date picker?

[newcoder1010]

Hello,

HTML:

<div class="webform-container-inline webform-datepicker">

<div class="form-item form-item-submitted-personal-information-birth-date-month form-type-select form-group">

<select class="month form-control form-select" required="required" id="edit-submitted-personal-information-birth-date-month" name="submitted[personal_information][birth_date][month]">

<option value="" selected="selected">Month</option>

<option value="1">Jan</option>

<option value="2">Feb</option>

</option>

</select>

<label class="control-label element-invisible" for="edit-submitted-personal-information-birth-date-month">Month</label>


</div>

<div class="form-item form-item-submitted-personal-information-birth-date-day form-type-select form-group">

<select class="day form-control form-select" required="required" id="edit-submitted-personal-information-birth-date-day" name="submitted[personal_information][birth_date][day]">

<option value="" selected="selected">Day</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

</select> 

<label class="control-label element-invisible" for="edit-submitted-personal-information-birth-date-day">Day</label>


</div>

<div class="form-item form-item-submitted-personal-information-birth-date-year form-type-select form-group">

<select class="year form-control form-select" required="required" id="edit-submitted-personal-information-birth-date-year" name="submitted[personal_information][birth_date][year]">

<option value="" selected="selected">Year</option>

<option value="1888">1888</option><option value="1889">1889</option><option value="1890">1890</option><option value="1891">1891</option>

<option value="1892">1892</option><option value="1893">1893</option><option value="1894">1894</option><option value="1895">1895</option><option value="1896">1896</option><option value="1897">1897</option>

</select>

<label class="control-label element-invisible" for="edit-submitted-personal-information-birth-date-year">Year</label>
</div>
</div>

Now Month, Day, Year display in a column. How can I display month, day and year in the same row? I tried this and I still see them in a column.

select#edit-submitted-personal-information-birth-date-year {
    width: 33%;
    float: left;
}

select#edit-submitted-personal-information-birth-date-day {
    width: 33%;
    float: left;
}

select#edit-submitted-personal-information-birth-date-month {
    width: 33%;
    float: left;
}

Please advise.

[dsonesuk]

You are floating the wrong elements, you need to float the div container elements they are within, as by default div elements stretch to the total available width of there parent element.