asked on

DIV Layering in HTML CSS page

Hi, I want to move the <div id="Message"> up 200px into the <div id="top">. this would be some form of a layer... Any help would be awesome.

a working version is here:
http://iftbeta.trekfederation.com/newsletter/email.htm

code is below:

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<meta name="author" content="Evan Cutler" />

	<title>Untitled 2</title>
    
    <style type="text/css">
        body {

        }
        #click {
            font-size:9px;
        }
        
        #frame {
        	background-color: #f3f3f3;
            background-image:url('http://iftbeta.trekfederation.com/newsletter/images/main-bg-bottom-med.jpg');
            background-color:#cccccc;
            background-repeat: repeat;
            width: 100%;
        }
        
        
        #top {
            position:relative;
            width: 100%;
            background-image:url('http://iftbeta.trekfederation.com/newsletter/images/main-bg.jpg');
            background-size: 100% auto;
            background-color:#cccccc;
            background-repeat: repeat-x;
            min-height: 522px;
            z-index: 4;
        }
        
        #message{
            position:relative;
        	border: 1px solid #ccc;
            background-image:url('http://iftbeta.trekfederation.com/newsletter/images/main-bg-med.jpg');
            background-color:#cccccc;
            background-size: auto 100%;
            left: 50%;
            top: -120%;
            width: 700px;
            margin-left: -350px;
            margin-bottom: 50px;
            min-height: 100%;
            color: white;
            padding: 5px 5px 5px 5px;


        }

        #title {
            width: 100%;
            min-height: 50px;
            font-size: 3em;
            font-weight: bold;
            color: black;
        }

        #body {
            min-height:100%;
        }
                
        #footer {
            width: 100%;
            background-image:url('http://iftbeta.trekfederation.com/newsletter/images/main-bg-bottom.jpg');
            background-size: 100% auto;
            background-color:#cccccc;
            background-repeat: no-repeat;
            min-height: 160px;

        }
        
        #body p {
            width: 100%;
        }
    </style>
    
    
    
</head>

<body>
    <div id="click" align="center">if you cannot see the below: <a href="#">click here...</a></div>
    
    <div id="frame">
    <div id="top" align='center'></div>    
            <div id="message">
                <div id="title" align='center'><!--put Title here-->This is my Title</div>
                <hr />
                <div id="body"><!--put Body Text here-->
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet egestas leo. Vestibulum nulla lorem, tempor et pulvinar et, accumsan quis erat. Cras nulla sapien, euismod quis volutpat sed, sodales a orci. Nullam tristique, mauris nec viverra bibendum, dui justo rhoncus lorem, eu consequat risus nulla ut est. Aenean id sapien malesuada odio malesuada aliquet. Phasellus pharetra cursus urna, id dapibus nulla vehicula nec. Aliquam suscipit egestas porta. Cras et sem hendrerit odio fringilla tempor eu non quam. Maecenas non neque id urna viverra suscipit. Proin viverra lectus ac purus commodo lobortis. Vestibulum non lorem in orci viverra condimentum.
                    </p>
                    <p>
                        Etiam metus enim, auctor et eleifend in, tincidunt at augue. In eleifend consectetur turpis id sagittis. Morbi posuere facilisis augue sit amet semper. Maecenas facilisis volutpat mattis. Vestibulum malesuada, erat eu dignissim egestas, ligula tellus vulputate augue, non elementum orci velit sit amet enim. Praesent elementum facilisis tortor, eu faucibus libero porttitor vitae. Integer a massa in elit rhoncus malesuada non rhoncus purus. Mauris suscipit imperdiet imperdiet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum sed ipsum vitae sapien gravida mollis ac nec lacus.
                    </p>
                    <p>
                        Proin aliquam magna at nisi dictum elementum. Quisque tellus lorem, dictum ut vehicula eget, egestas a enim. Donec eu dolor et nunc condimentum scelerisque sed id magna. Aenean tristique metus non neque ultricies quis aliquet urna vehicula. Nullam varius nulla nec nibh tincidunt in dictum mauris pretium. Nunc vel tellus metus, at pellentesque est. Aliquam dui eros, vulputate eget interdum nec, molestie eget justo. Ut odio nunc, malesuada vitae bibendum eu, ultricies quis ante. Pellentesque scelerisque bibendum cursus. Nam condimentum dolor et nisl euismod eu luctus ante ultricies. Sed pulvinar posuere rhoncus. Etiam in elementum nisl. Integer porta dapibus mi, sit amet consequat libero venenatis ullamcorper. Curabitur placerat, felis convallis commodo pellentesque, odio tortor scelerisque mauris, vitae semper risus ligula eget est. Donec ac luctus massa. Vivamus in odio augue, non tempus tellus.
                    </p>
                    <p>
                        Maecenas magna lorem, molestie eleifend fringilla quis, tincidunt et quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed et felis ipsum. Duis vestibulum laoreet libero ac facilisis. Mauris in sapien dui, suscipit dignissim ligula. Cras vitae consequat massa. Vivamus pretium nibh quis felis interdum sed consectetur purus aliquet. Suspendisse potenti. Suspendisse enim libero, viverra at gravida vel, ornare sed libero. Curabitur vitae nisi nibh.
                    </p>
                    <p>
                        Nulla interdum venenatis diam, et tristique est blandit condimentum. Nam ligula elit, semper at posuere vitae, auctor sit amet purus. Vivamus eleifend ante sem, facilisis volutpat orci. In hac habitasse platea dictumst. Suspendisse vel tortor nibh. Etiam sed tristique sem. Sed et lacus eu sapien eleifend fringilla vitae ac metus. Fusce at leo a dui ornare laoreet at rutrum orci. Aenean laoreet purus a felis euismod eu rutrum velit lacinia. Mauris eu arcu tellus, in aliquet tortor. Etiam ac tempor metus. Fusce non nulla aliquet magna pretium bibendum a et eros. Vivamus molestie felis eget eros adipiscing et varius justo molestie. Duis vehicula malesuada quam ut interdum. Donec luctus sapien at purus volutpat rhoncus. 
                    </p>
                </div>
            </div>
     <div id="footer" align='center'></div>             
     </div>
    
      




</body>
</html>

Open in new window