在流体布局中分层对象

Question

我有一个网络浏览器的图像，我试图使用position：absolute来定位文本网址。问题是，当我调整页面宽度时，文本不会在流体布局中移动图像。

带有文字网址示例的设备屏幕（我正在努力实现的目标）：http://matthewhartman.github.io/base/

我的代码：http://jsfiddle.net/VwkwT/1/

HTML:
<div id="primaryContainer" class="primaryContainer clearfix">
      <header id="Header">
        <img id="Logo" src="img/logo.png" class="image" />
        </header>
        <section id="HeroDiv" class="centre">
            <img id="Hero" src="img/browser.png" class="image" />
            <div id="url">www.website.com</div>
        </section>
        <div id="box1" class="clearfix">
        </div>
        <div id="box2" class="clearfix">
        </div>
        <div id="box3" class="clearfix">
        </div>
        <div id="box4" class="clearfix">
        </div>
    </div>

CSS:
* {
    margin:0px;
    padding:0;
}

.primaryContainer {
    height: auto;
    margin-left: auto;
    margin-right: auto;
    min-height: 100%;
    width: 100%;
    background-color: rgb(252, 252, 252);
}

#box1 {
    float: left;
    height: 1190.75px;
    margin-left: 0px;
    margin-top: 153px;
    clear: both;
    width: 100%;
    background-color: rgb(244, 244, 244);
}

#box2 {
    float: left;
    height: 759.40625px;
    margin-left: 0%;
    margin-top: -90.5px;
    clear: none;
    width: 100%;
    margin-right: 0%;
    background-color: rgb(242, 242, 242);
}

#Logo {
    float: left;
    width: 190px;
    height: auto;
    margin-left: 13.893926%;
    margin-top: 41.75px;
    margin-bottom: 45.75px;
    clear: none;
}

#box3 {
    float: left;
    height: 733.828125px;
    margin-left: -100%;
    margin-top: 668.90625px;
    clear: none;
    width: 100%;
    margin-right: 0%;
    background-color: rgb(184, 218, 242);
}

#box4 {
    float: left;
    height: 733.828125px;
    margin-left: 0%;
    margin-top: 0px;
    clear: both;
    width: 100%;
    margin-right: 0%;
    background-color: rgb(244, 244, 244);
}

#HeroDiv {
    position:relative;
    height: 392px;
}

#url {
    position:absolute;
    font-size:11px;
    color:#8B8B8B;
    font-family: 'Candara', Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif;
}

#Hero {
    position:relative;
    width: 809px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    clear: both;
}

感谢任何帮助！