Why is text in one div prematurely wrapping based on layout above

3 replies [Last post]

Tue, 2013-02-19 16:04

Newbie Paul

Offline

newbie

Last seen: 9 years 19 weeks ago

Timezone: GMT-5

Joined: 2013-02-14

Posts: 4

Points: 8

See web page at www.efficertain.com/mortgageinvestor1.php

The text in the 'footerbox' div (red border) seems to be wrapping prematurely, maybe either following the 'credbox' div (green border) or maybe due to floating around the 'requestbox' div

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<?php
$filename = basename($_SERVER['PHP_SELF']);
?>
 
<html>
<head>
 
<style media="all" title="mystyles" type="text/css">
 
	body { 
	background-color: #fff2e5; 		
	color: #000000; 		
	font-family: Verdana, Geneva, Arial, sans-serif;
	font-size: small; } 	
 
	h1 { 
	font-size: extra large; 
	font-style: italic; 
	text-align: center; }
 
	.quotation { 
	font-style: italics;
	font-size: larger;
	font-color: #00007e;
	font-family: freestyle script, monotype corsiva, cursive;
	margin-top: 0em; 
	margin-bottom: 0em; }
 
	.signature {
	margin-top: 0em;
	margin-bottom: 0em;
	font-style: italics;
	font-color: #00007e; 
	font-family: freestyle script, monotype corsiva, cursive;
 	text-align: right;
	font-size: 150%; }
 
	#canvas {
	background-color: #CDF3FF; 
	position: relative;
	height: 1300px;
	width: 700px;
	margin: auto;
	padding: 2px 10px 2px 10px;}
 
	#titlebox { }
 
	#contentzonebox {
	background-color: #CDF3FF; 
	background-image: url("images/grandparentsgrandchildren.jpg");
	background-repeat: no-repeat; 
	font-size: large;
	height: 1125px;
	border: 1px solid black; 
	padding: 10px; }
 
	#footerbox {
	height: 50px;
	border: 1px solid red; 
	padding: 10px; }
 
	#relevantimagebox {
	margin: 3px 3px auto auto; 
	width: 170px;
	height: 180px;
	position: relative;
	right: 3px; }
 
	#solutionbox { 
	width: 300px;
	position: relative;
	top: -200px;
	padding: 0px 10px 0px 10px;
	background-color: #ffffff; 
	opacity:0.4;
	border-radius: 15px;
	border: 0px solid black; }
 
	#wiifmbox { 
	background-color: #ffffff; 
	width: 400px;
	position: relative;
	top: 50px;
	border: 1px solid #b899c8;
	border-radius: 15px;
	box-shadow: 10px 10px 5px #888888; }
 
	#requestbox {
	position: relative;
	font-size: small;
	bottom: 615px;
	float: right;
	width: 200px;
	height: 365px;
	padding: 2px 3px 2px 15px;
	margin: 0px 3px 3px 3px;
	background-color: #fff2e5;
	border: 1px solid #fff2e5; 
	border-radius: 15px }
 
	#credbox {
	width: 444px;
	position: relative;
	top: 70px;
	border: 1px solid green;
	padding: 0px 5px 0px 5px;}
 
</style>
 
</head>
 
 
<body>
 
<div id='canvas'>
 
	<div id='titlebox'><h1>Private Mortgage Lender Deal&nbsp;Zone</h1></div>
 
	<div id='contentzonebox'>
 
	<div id='relevantimagebox'><image src="images/house.jpg"></div>
 
	<div id='solutionbox'>
		<p>Work your money <strong><u>smarter</strong></u> as a private mortgage lender!</p>
		<p>Lend at 7-15% interest!</p>
		<p>Find opportunities here</p>
	</div><!--solutionbox-->
 
	<div id='wiifmbox'>
		<ul>
		<li style="list-style-image: url(images/listmarker.jpg); margin-bottom:10px">Enjoy <strong><u>peace of mind</strong></u> through property-secured investing in private mortgages</li>
		<li style="list-style-image: url(images/listmarker.jpg); margin-bottom:10px">Achieve your <strong><u>retirement goals</strong></u> with wealth building profits that capture the power of compounding</li>
		<li style="list-style-image: url(images/listmarker.jpg); margin-bottom:10px">Become the banker and choose the mortgages that are <strong><u>right for you</strong></u> to finance on a no-obligation basis</li>
		<li style="list-style-image: url(images/listmarker.jpg)">Earn <strong><u>monthly cash flow</strong></u> from your investments</li>
		</ul>
	</div><!--wiifmbox-->
 
	<div id='credbox'>
		<p class='quotation'>"We just completed our first private mortgage a couple of months ago and it felt great to see those monthly interest payments start rolling in."</br>
		<div class='signature'>B.C. in Guelph, ON</div></p>
		<p class='quotation'>"I've been investing like this for 3 years now have really gotten the hang of it."</br>
		<div class='signature'>M.L. in Owen Sound, ON</div></p>
		<p class='quotation'>"This sounds like a lot better return than we can get with GICs and we are just looking for our first private mortgage to finance."</br>
		<div class='signature'>B.F. in Wiarton, ON</div></p>
	</div><!--credbox-->
 
<div id='requestbox'>
<p>Apply <strong><u>now</strong></u> for a<br>
<strong><u>free</strong></u> phone consultation<br>
on how private mortgage investing is <strong><u>right for you</u></strong>
  <script src='scripts/sfm_moveable_popup.js' type='text/javascript'></script>
      <script src='scripts/sfm-png-fix.js' type='text/javascript'></script>
      <link rel='stylesheet' type='text/css' href='style/Callback.css'/>
      <form id='Callback' method='post' action='callback_processor.php' accept-charset='UTF-8'>
         <div id='Callback_errorloc' class='error_strings' style='width: 476px; text-align: left'></div>
 
         <div id='Callback_outer_div' style='width: 476px; height: 27px;'>
 
           <div id='Callback_inner_div' style='position:relative;'>
               <input type='hidden' name='sfm_form_submitted' value='yes' />
               <input type='hidden' name='page' value= '<?php echo $filename ?>' />
	       <input type='hidden' name='nextpage' value= '<?php echo $absolute_page_address ?>' />
 
	       <div id='Name_container'>
		  Name<br>
                  <input type='text' name='name' id='Name' value='' size='20' class='sfm_textbox'/>
	       </div>
 
               <div id='Phone_container'>
		Phone number<br>
                  <input type='text' name='phone' id='Phone' value='' size='20' class='sfm_textbox'/>
               </div>
 
               <div id='When_container'>
		Best time to call<br>
                  <input type='text' name='when' id='When' value='' size='20' class='sfm_textbox'/>
	          </div>
 
               <div id='Submit_container'>
                  <input type='image' name='Submit' id='Callback_Submit_img' src='images/Callback-Submit-1.jpg' alt='submit'/>
               </div>
 
            </div><!--Callback_inner_div-->
 
         </div><!--Callback_outer_div-->
 
      </form>
 
	<script type='text/javascript'>
		// <![CDATA[
sfm_fix_png("Callback_Submit_img","images/spacer.gif");
		if(document.sfm_after_load != undefined){document.sfm_after_load();}
 
		// ]]>
	</script>
	<script type='text/javascript'>
		// <![CDATA[
var CallbackValidator = new Validator("Callback");
 
		CallbackValidator.EnableOnPageErrorDisplay();
		CallbackValidator.SetMessageDisplayPos("right");
		CallbackValidator.EnableMsgsTogether();
		CallbackValidator.addValidation("Name","req","Please fill in Name");
		CallbackValidator.addValidation("Phone","req","Please fill in Name");
		CallbackValidator.addValidation("Phone","regexp=(?:[\\(][0-9]{3}[\\)]|[0-9]{3})[-. ]?[0-9]{3}[-. ]?[0-9]{4}$","Please enter a valid input for Phone");
		CallbackValidator.addValidation("When","req","Please fill in When to call");
 
		// ]]>
	</script>
 
</div><!--requestbox-->
</div><!--contentzonebox-->
 
<div id='footerbox'>
	<p>Efficertain Corp. in association with Broker #  Privacy Policy  Contact Us Copyright 2012 Efficertain</p>
</div><!--footerbox-->
 
</div><!--canvas-->
 
</body>
</html>

Tags:

Wed, 2013-02-20 04:27

Tony

Offline

Moderator

Brisbane

Last seen: 3 weeks 5 days ago

Brisbane

Timezone: GMT+10

Joined: 2003-03-12

Posts: 5344

Points: 2965

Hi Paul, You should change

Hi Paul,
You should change your doctype to one that is standards compliant, so that modern browsers will render correctly.
Try <!DOCTYPE HTML> the html5 doctype.

Then try and remove the height values from #canvas and #contentzonebox.
They are going to cause you problems.

Thu, 2013-02-21 04:05

Newbie Paul

Offline

newbie

Last seen: 9 years 19 weeks ago

Timezone: GMT-5

Joined: 2013-02-14

Posts: 4

Points: 8

Fixed, albiet with an

Fixed, albiet with an unglamourous widespread use of absolute positioning.

Thu, 2013-02-21 04:31

gary.turner

Offline

Moderator

Dallas

Last seen: 1 year 17 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

Position property?

If you think you fixed your problem by using absolute position, you've got two problems.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Why is text in one div prematurely wrapping based on layout above

Hi Paul, You should change

Fixed, albiet with an

Position property?

User login

Navigation