Menu
I am currently designing a large rounded edged main text box for a sites template. There are 2 .gif images I am using, I got the top gif (which resides in the #bodyboxtop) to stick above the text box (#bodybox; that will scroll down as I add more information). The issue I am having is with the bottom .gif (in the #bodyboxbtm)that is currently stuck on the top. i want to move it under the scrolling text box ( don’t want to keep moving the div if I enter more text). Is it possible to do this without using Jquery? I don’t know Java at all and want to avoid it if I can.
[code=html]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<style type=”text/css”>
#bodyboxtop {width:1000px; height:175px; background-image:url(bgbodytop.gif); background-repeat:no-repeat; background-position:top left;}
#bodybox {width:1000px; background-color:#FFF;}
#bodybox h2 {margin:0px; padding-left:250px;
padding-top:1em; }
p {
padding-left:225px;
padding-right:2em;
text-align: justify;
}
#bodybox h3 {margin:0px; padding-left:250px;
padding-top:1em; padding-right:1em}
#bodyboxbtm {
width:1000px;
height:175px;
background-image: url(bgbodybtm.gif);
background-repeat:no-repeat;
background-position:left bottom;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Welcome to American Refugee</title>
</head>
<body>
<div id=”bodyboxbtm”>
</div><!–bodyboxbtm–>
<div id=”bodyboxtop”>
</div><!–bodyboxtop–>
<div id=”bodybox”>