html - ある画像が別の画像を中心から押し出す

Question

別の画像を中心から押し出しているロゴがあります。ロゴにどれだけの余白を置いても、topimage を中央に配置したいと考えています。

html: http://www.joekellywebdesign.com/churchsample1/index.html

<div id="wrapper">
        <div id="top">
            <div id="logo">
                <img src="images/logo.png">
            </div>
            <div id="topimage">
                <img src="images/church.png">
            </div>
        </div>
        <div id="navmenu">
            <h1>Test text</h1>
        </div>
        <div id="bottom">
            <div id="bottomleft">
                <h1>Welcome to Fictional Baptist Church</h1>
            </div>
            <div id="bottomright">
                <h1>Join us on Sunday nights for a special series of sermons</h1>
            </div>
        </div>
    </div>

css: http://www.joekellywebdesign.com/churchsample1/css/styles.css

#wrapper {z-index:5; width:900px; margin:auto;position: relative;}
#top {z-index:10; background-color:#80FFFF; margin:0;padding:0;position: relative;}
#logo {z-index:50; float:left; margin:0;padding:0;position: relative;}
#logo img {margin:50px 0 0 50px}

ここにコードを貼り付ける方法がわかりません。