I have a form composed of 3 fieldsets, and I want to display all individual elements on the same line, meaning:< input> To < input > < input> < checkbox> < checkbox> < checkbox> ...Instead of the way it is now:
So basically, I need to move the contents of the first fieldset into a single line.Here's my HTML:\[code\]<div id="filtersDiv" > <fieldset class="reservationFiltersCheckinDates"><legend>{!$Label.check_in}</legend> <apex:inputField value="http://stackoverflow.com/questions/15503907/{!reservationSearchCriteria.Check_In__c}" id="reservationSearchCheckInStart" onchange="changeValues()" styleClass="ajaxableElem" /> {!$Label.to} <apex:inputField value="http://stackoverflow.com/questions/15503907/{!reservationSearchCriteria.Check_Out__c}" id="reservationSearchCheckInEnd" onchange="changeValues()" styleClass="ajaxableElem" /></fieldset> <fieldset class="reservationFiltersSearch"><legend>{!$Label.nameOrReservationId}</legend> <input type="text" value="http://stackoverflow.com/questions/15503907/{!reservationSearchText}" id="reservationSearchText" onfocus="this.oldvalue = http://stackoverflow.com/questions/15503907/this.value;" onkeyup="showAjax(this);changeValues();" /> <script type="text/javascript"> // have to do it here, as this change is lost of partial page refresh, and // we can't add placeholder attribute directly to visualforce tags j$(document).ready(function() { j$("[id*='reservationSearchText']").attr('placeHolder', 'Search'); }); </script></fieldset> <fieldset class="reservationFiltersStatus"><legend>{!$Label.status}</legend> <label><input type="checkbox" value="http://stackoverflow.com/questions/15503907/{!pendingResCheck1}" id="pendResCheckID" onchange="changeValues()" checked="true" class="ajaxableElem" />{!$Label.pending}</label> <label><input type="checkbox" value="http://stackoverflow.com/questions/15503907/{!checkedInResCheck}" id="checkedInResCheckID" onchange="changeValues()" checked="true" class="ajaxableElem" />{!$Label.checkedin}</label> <label><input type="checkbox" value="http://stackoverflow.com/questions/15503907/{!cancelledResCheck}" id="cancelledResCheckID" onchange="changeValues()" checked="true" class="ajaxableElem" />{!$Label.canceled}</label> <label><input type="checkbox" value="http://stackoverflow.com/questions/15503907/{!confirmResCheck}" id="confirmResCheckID" onchange="changeValues()" checked="true" class="ajaxableElem" />{!$Label.confirmed}</label> <label><input type="checkbox" value="http://stackoverflow.com/questions/15503907/{!checkedOutResCheck}" id="checkedOutResCheckID" onchange="changeValues()" checked="true" class="ajaxableElem" />{!$Label.checkedout}</label></fieldset></div>\[/code\]CSS:\[code\]#filtersDiv{ margin: 10px 0 5px 0 !important;}#filtersDiv fieldset{ float: left; margin-right: 10px; border: none;}#filtersDiv fieldset legend{ font-size: 14px !important;}\[/code\]