How can I get this select box to display inline?

Head out to http://hihatwebdesign.com/question/ and take a look at my quandary.

If you click on the left hand side of the select box, you'll see the functionality that I've got going. The problem is getting it to display alongside my "region" label.

Without the accompanying Javascript / functionality, as a regular select box it displays just fine as seen with http://hihatwebdesign.com/question/comparison.php. How can I get it to display like that, but with the Javascript dynamic intact?

You can see all the CSS files and Javascript as they're referenced in the "head" section of the page.

What do you think?
Bruce GustPHP DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
For the parent div you have:
<div style="padding-top:20px; display:inline;">region:
...

Open in new window

Try:
<div style="display: inline-block; line-height: 25px; padding-top: 20px;">region:
...

Open in new window

Then add either display:inline-block or float:right to the MSDList container:
.MSDList {
    -moz-user-select: none;
    border: 1px solid #000;
    color: #000;
    cursor: pointer;
    font-family: Arial,sans-serif;
    padding: 0;
    white-space: nowrap;
    float:right
}

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bruce GustPHP DeveloperAuthor Commented:
Tom, that worked! Why?

Is it because you dictated the line height of the container that you compelled the element to stay level with the label?

Thanks!
Tom BeckCommented:
Line-height simply moves the word "region:" down a little so it's vertically centered on the dropdown. It's not essential to the fix.

A <select> is an inline element. Your MSDList is a <div>, a block element. Different rules apply with regard to flow layout. The word "region:" is also a child node of the parent of the MSDList <div>, which is also a <div>. Adding inline-block to the parent <div> allows it to tolerate elements to the left and right but because the MSDList is a block element there's an automatic line break so it goes below the "region:" child node. So you need to add either display:inline-block or float:right to the MSDList <div> to get them side by side again. It's a bit of a hack, but you are not dealing with a normal inline <select> element. Another possibility is to use display:inline-flex in the parent <div> but this does not work in Safari or older IE versions. A better layout would be to put "region:" in a block element of it's own and just float all child <div>s of the parent with float:left or display:inline-block.
Bruce GustPHP DeveloperAuthor Commented:
Excellent!

If you've got a minute, I've got another question that's dealing with the same kind of stuff at http://www.experts-exchange.com/questions/28712552/How-can-I-get-this-select-box-to-come-down-in-my-layout.html

Thanks!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.