Question

So I am trying to put two inline dropdown lists. I tested and it works fine in Chrome and Firefox, but IE9 (ofcourse) is not liking it. It puts the second dropdown list right below the first one. This is what my html and css looks like:

HTML:

<div id="region-path">
    <div id="region-dropdown">
            <!-- <form name="regionform" action=""> -->
            <form action="">
                    <!-- <select id="regionselection" > -->
                    <select id="regionDropDown">
                        <option value="0" selected="selected">All Regions</option>
                        @foreach (var region in Model.RegionData)
                        {
                            <option value="@region.regionID"> @region.regionName</option>
                        }
                    </select>
                    <!-- <input type="button" id="submitButton" value="Submit" /> -->
            </form>
     </div>

    <div id="path-dropdown">
        <form action="">
            <select>
                <option value="0" selected="selected">All Paths</option>
            </select>
        </form>
    </div>
</div>

CSS:

#region-path 
{
    margin: 20px 35px;
}

#region-dropdown, #path-dropdown
{
    display: inline-block;    
    width: 160px;
}

#path-dropdown
{
    margin-left: 20px;
}

How can I fix this? I am very new to web development, so point out if I am doing something else wrong too.

Answer 1

I had to play around with it a little bit and finally fixed it:

#region-path 
{
    position: relative;
    margin: 20px 35px;
    width: 320px;
    height: 20px;
}

#region-dropdown, #path-dropdown
{
    position: absolute;
    display: inline;   
    width: 90px;
    height: 19px;
}

#path-dropdown
{
    left: 100px;
}