Need to align SPAN and DIV better

I use SPAN's to put up labels of text on my web page - like "Date Assessed" and "Discharged" and this problem one circled below - "Program".

Normally these SPAN's are next to simple INPUT elements - look at the raw HTML here

Code:

---

<div class="acs-div-p">
    <label class="awc-Participant acs-edit-small-text acs-edit-important"></label>
    Id: <label class="awc-EntryKey acs-edit-small-text"></label>
    <br /><br />
    <span class="acs-span-large">Last Name</span>
    <input type="text" class="awc-LastName acs-edit-medium-text"/>
    <br />
    <span class="acs-span-large">First Name</span>
    <input type="text" class="awc-FirstName acs-edit-medium-text"/>
    <br />
    <span class="acs-span-large">Date Assessed</span>
    <input type="text" class="awc-DateAssessed acs-edit-medium-text acs-class-datepicker"/>
    <br />
    <span class="acs-span-large">Discharged</span>
    <input type="text" class="awc-DischargeDt acs-edit-medium-text acs-class-datepicker"/>
    <br />
    <textarea class="awc-DischargeNote acs-edit-small-text-box"></textarea>
    <br />
    <span class="acs-span-small">Program</span>
    <input type="text" class="awc-ProgramCd acs-edit-hidden-text"/>
</div>

---

The "Program" SPAN is next to a hidden INPUT element - which gets morphed into a jQuery Drop Down that I use - when the page loads and ajax builds itself.

The Drop Down is in a DIV - of which I have no control over - the CSS styling for that DIV is part of the jQuery plugin I'm using. Notice that the DIV has a MARGIN on the bottom of "3".

How can I get my "Program" text to align better with this DIV- do I need to put a MARGIN around it. I started messing with stuff like that and it was just causing the BLUE LINE that surrounds this whole area MOVE DOWN - not the desired result.

I want the PROGRAM TEXT to move up!

Quote:

---

Originally Posted by szlamany

The Drop Down is in a DIV - of which I have no control over

---

You do have control over it, if you choose...

Is the plugin css specified in a .css file or applied via DOM scripting? If it's in .css, then just edit that and be done with it. Otherwise, you might be able to force it with a !important declaration in your own .css file.

By the looks of things, this <div> has display:inline-block or display:inline applied? That would make it an inline element, when <div> is normally block-level.

The correct way to do this would be to change all your <span> elements to <label for=""> to associate each label with it's form control. This improves the accessibility of the page by having the direct association between label and input control in the DOM. Also not sure why you have empty <label> tags at the top of your sample, as a <label> tag without associated form control has no semantic meaning.

You can also place each <label>/<input> combo inside a normal block-level <div> to add a "container" around them.

Labels with a class starting with "awc" bind to JSON data from an AJAX call.

The same holds true for the "awc" class that is in each INPUT element.

I'm not willing to touch the CSS of that jaldropdown - way to risky.

I need to move up my PROGRAM label - that's the goal.

Any way to do that easily?? Putting them both in the same DIV - is that reasonable?

I dug a little further and it looks like I put the DISPLAY:INLINE-BLOCK on that DIV ELEMENT with CSS a real long time ago - so that it would sit next to my LABEL's like my regular textboxes did. I guess that was the hack that leads me to this spot now...

Since the plug-in "exists" in a DIV - of which I am not willing to change - I have to have a way for that DIV to float nicely next to the SPAN of the LABEL.

btw - this HTML and CSS is repeated over and over again in many pages for many customers - it's not like this is one web page that I'm trying to get working...