Question

I have a list of checkboxes for timezones, something like this:

<input type="checkbox" class="TimeZoneCheckbox" value="-9.00" /><label class="TimeZoneLabel">US Alaska (GMT -9:00)</label>
<input type="checkbox" class="TimeZoneCheckbox" value="-8.00" /><label class="TimeZoneLabel">US Pacific Time (GMT -8:00)</label>
<input type="checkbox" class="TimeZoneCheckbox" value="-7.00" /><label class="TimeZoneLabel">US Mountain Time (GMT -7:00)</label>
<input type="checkbox" class="TimeZoneCheckbox" value="-6.00" /><label class="TimeZoneLabel">US Central Time, Mexico City (GMT -6:00)</label>
<input type="checkbox" class="TimeZoneCheckbox" value="-5.00" /><label class="TimeZoneLabel">US Eastern Time (GMT -5:00)</label>

I have the following CSS:

.TimeZoneCheckbox{clear:left;}
.TimeZoneLabel{float:right;}

I’m looking to avoid using <br /> tags and use CSS floats and clears. It should be working but it’s not; what am I missing?

Thanks for your suggestions.

Answer 1

Or this…

.TimeZoneCheckbox{clear:left; float: left;}
.TimeZoneLabel{float:left;}

http://jsfiddle.net/vhPT4/