Question

currently I have a very simple form with the following:

<div class="datepicker">
   <p>
      From: 
      <span class="spanMonth">
         <div id="div_dateFromReports_month">
            <select></select>
         </div>
      </span>
      <span class="spanDay">
         <div id="div_dateFromReports_day">
            <select></select>
         </div>
      </span>
      <span class="spanYear">
         <div id="div_dateFromReports_year">
            <select></select>
         </div>
      </span>
   </p>
   <div style="clear: both;"></div>
</div>

Now, the classes on every span only contain a “float: left”, which as a result makes them float and place the “From” word to the right, which is of course unintended, is there any way to put the “From” word to it’s intended position without wrapping it?

Note: the tags were cut to avoid filling the question with unnecessary data.

It looks like this:

   _______   ________   ________
  |_______| |________| |________| From:

And I need it to look like this:

          _______   ________   ________
 From:   |_______| |________| |________| 

NOTE:
As I commented below, yes, I know, the broken HTML, sadly this is a part of a page which is already hacked with jQuery and lots of broken view helpers (Zend), right now all I’m trying is to fix this as I really can’t modify the structure, the SELECTs come from php, the spans containing the DIVs come from a Zend view helper and so on. As of right now, there’s not much I can do, you know how software companies are asking for things right away…hate to hack HTML, but right now it can’t be helped. Thank you for all your input 🙂

Answer 1

Live Demo (Only tested in FireFox 3.6.x)

Remove the float: left; and use this CSS:

.datepicker span div { display: inline; }

---

Alternate solution: (assuming you can edit the HTML)

<div class="datepicker">
      From:
      <select></select>
      <select></select>
      <select></select>
</div>