Styling and positioning custom elements in jquery mobile?
===

I love jQuery Mobile for development of standard items in a mobile browser.  But, what about positioning custom elements I create? I'm finding this inordinately difficult and wonder if there is a good solution to working with your own elements and their respective IDs and classes.  

For example, I have a standard jquery mobile page with a fixed header and a footer (see mockup below).  In the content area, I have two divs that will react to events that occur when a user taps different buttons in the footer (as if there were calculator buttons in the footer and tapping them changed the output in the main content area).

    ----------- (header) -------------
      <back      Title 
    ----------------------------------
    
        ---- custom div A ----
    
    
    
              custom div B
    ----------- (footer) --------------
      1  2  3  4  5  6  7  8  9  0  . 
    |clear|   |delete|        |submit|
    -----------------------------------

I can set up styling inside of the content area, using position:absolute, top and left.  The problem is that I would like these divs to react to the height of the content area.  Specifically, I'd like custom div B to sit at the bottom of the content area regardless of the current height of the content area.  Using the bottom: attribute doesn't seem to do anything for me. I can fix it at a specific height, but the problem is that when the screen orientation changes, that fixed height is clearly in relation to the top and not the bottom.

So, what's the best way to position non-standard elements in jquery mobile?