Question

I want to horizontally position some text along with two dropdown menus like:

Text One : | I'm a dropdown |     Text Two: | I'm a second dropdown |

where the ‘I’m a dropdown’ elements are absolutely positioned ul elements and will eventually have some JS to act as dropdown menus. I initially thought the HTML would be something like (Here is the JSFiddle):

<div id="wrapper" class="clearfix">
    <div>
        Tet One
    </div>
    <div class="dropdown">
        <ul>
            <li>I'm a dropdown</li>
            <li>Value One</li>
        </ul>
    </div>
    <div>
        Text Two
    </div>
    <div class="dropdown">
        <ul>
            <li>I'm a second dropdown</li>
            <li>Value Two</li>
        </ul>
    </div>
</div>

along with CSS like:

#wrapper > div{
    float: left;
}
#wrapper > div.dropdown{
    position: relative;
}
#wrapper > div > ul{
    position:absolute;
    width: 100%;
}

The result is that the text-only div elements (‘Text One’ and ‘Text Two’) float fine, but the relatively positioned elements don’t maintain a proper width and the absolutely positioned ul elements are placed on top of each other, i.e. everything is squished to the left.

a) can this be fixed?

b) is this the wrong approach and is there a better one (like using display: inline-block?)

Answer 1

I ended up solving this by using an inline-block outter div, placed each absolutely positioned ul inside a relative div wrapper like so:

http://jsfiddle.net/timmyomahony/tGn6m/

On reflection, I didn’t ask this question very well so apologies for those who took the time to answer.