jQueryMobile-enabled site within a DIV

Question

OK, here's what I'm trying to achieve :

• I have a very basic .html page, based on jQuery Mobile
• I have another, "normal" website with a - let's say - rectangular div in it
• I want to make my jQuery Mobile website appear in that div

Notes :

• <iframe>s are out of the question, unless you know how I could make it work with the parent website being able to access the "child", same-domain, from localhost.
• when simply trying to copy-paste the "core" of the jQuery Mobile inside my div (not the outter tags, just the main page + the necessary scripts) the page does show up, though quite a mess actually.

Any ideas?

---

UPDATE : Here's the jsfiddle : http://jsfiddle.net/X5xys/

---

And the code...

HTML :

<div id="preview"> 
    <div id="iframe">
        <div data-role="page">
            <div data-role="header">
                <h1>Header</h1>
            </div>
            <div data-role="content">
                <a data-role="button" id="mybutt" href="#">
                    Click me
                </a>
                <a data-role="button" id="mybutt" href="#">
                    Click me
                </a>
                <a data-role="button" id="mybutt" href="#">
                    Click me
                </a>
                <a data-role="button" id="mybutt" href="#">
                    Click me
                </a>
                <a data-role="button" id="mybutt" href="#">
                    Click me
                </a>
                <a data-role="button" id="mybutt" href="#">
                    Click me
                </a>
            </div>
        </div>          
    </div>
</div>

CSS :

        #preview {
            margin:50px auto;
            background-size: 376px 678px;
            width: 376px; max-width: 376px;
            height: 678px; max-height: 678px;
            text-align: center;
        }

        #preview #iframe {
            margin:92px auto;
            border:1px solid black;
            width:320px; max-width: 320px;
            height:480px; max-height: 480px;

        }

Answer 1

add a Id="page" for you data-role="page" and give the following css

#page{
    position:relative;
}

Demo