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

LVL 9
Evan CutlerVolunteer Chief Information OfficerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kyle HamiltonData ScientistCommented:
why not just reduce the height of #top?
#top {
   min-height: 322px;
   ...
}

Open in new window

0
Evan CutlerVolunteer Chief Information OfficerAuthor Commented:
because I want the layering effect.
If I reduce min-height, it will just reduce the size of the top image.
I want that to remain.

thanks.
0
Kyle HamiltonData ScientistCommented:
remove position:relative from top and message.

then replace this:
#message {
border: 1px solid #CCC;
background-image: url('http://iftbeta.trekfederation.com/newsletter/images/main-bg-med.jpg');
background-color: #CCC;
background-size: auto 100%;
color: white;
padding: 5px 5px 5px 5px;
margin: -200px auto 0 auto;
z-index: 100;
}

not sure that's what you want though. You want that thick grey bar?

maybe you could post an image of what you want it to look like.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Evan CutlerVolunteer Chief Information OfficerAuthor Commented:
That did it...
Thanks much...
They are extremely happy.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.