JQUERYMOBILE positioning a grouped UI-SELECT

i made 3 ui-select(for month, day and year) in jquerymobile, and i managed to group them inline by updating their css using

width: auto; display: inline-block;

but i am having problems with positioning it on the screen, if I use

'position':'relative', 'right':'-200px', 'margin-top':'300px'

I manage to position them perfectly on the screen without ruining the design. But I needed them in absolute position, when I try to change the position to absolute the 3 UI's overlap开发者_JAVA百科s. This behavior is different from the normal grouped ui buttons. do anyone know how can I make them position in the screen in absolute without making the select overlap?

thank you in advance

Have you tried grouping the buttons using jQuery Mobile's layout grids? A three column grid works like this:

<div class="ui-grid-b">
 <select id="1"><!-- options etc. --></select>
 <select id="2"><!-- options etc. --></select>
 <select id="3"><!-- options etc. --></select>
</div>

Read more here: jQM docs: Layout grids