<div id="mbody" style="position:relative; width:1000px; height:1050px;"> <div id="lbody" style="position:absolute; text-align: justify; width:500px; height:1050px;"> Text </div> <div id="rbody" style="position:absolute; text-align: justify; width:500px; height:1050px;"> <img src="someimg.jpg> <font style="position:absolute; top:330px;"> <!-- I use this to push the text down below the img. --> The </font> </div> </div>
The problem is that in firefox when I view the page I will use ctrl+mouse wheel to zoom out and the text will be pushed outside of the div from the bottom moving from the block to on top of the background image i have. It doesnt do this in IE. The only think I could think of was to fix it to the bottom of the div by taking out top:330px and replacing it with bottom:15px. This kept the text from scrolling down outside the div but then was pushed up behind my image. What I am trying to accomplish is to have the text in the rbody div aligned at the bottom with the text in the left body div. Any ideas as to what I am doing wrong? I have been trying to fix this for the past few days now. The website is www.thezombiesarehere.t15.org The only pages that are somewhat functional is the main page and the Food Supplies page under the 'Are you ready?' link. Thanks for the help in advance.
This post has been edited by BenignDesign: 04 October 2012 - 02:15 AM
Reason for edit:: Added [code][/code] tags