Solved

trying to make tables side by side

Posted on 2013-06-25
15
326 Views
Last Modified: 2013-06-26
In the center of this page I have 8 tables
i am trying to make the tables side by side
4 tables on each side
This does not work: <div class="righttable" style="float:right">
The page:
http://roofgenius.com/test.asp
Roofing Software Information is the first table on the right side
How can i do this?
0
Comment
Question by:isnoend2001
  • 6
  • 6
  • 3
15 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
See updated code with working sample here http://jsbin.com/enezuw/1/

1) Took out div's between div.lefttable and div.righttable
2) Added class   .lefttable, .righttable{float:left;}
3) I took out your google analytics code.  Make sure to add it back to your site.

Now the div.lefttable and div.righttable will be in order of the html.  If there is only room for 2 accross then it starts at the top, goes to the right then down and to the left and so on.

Another way you can do this is split the left and right where you enclose all the .lefttable's in one div and all the righttable's in another div.  Give both of those a new class and change this  .lefttable, .righttable{float:left;} to reflect the new class.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Roofgenius site map</title>
<meta name="description" content="How total squares are totaled, site map, price per square, roof pitch, roof pitch examples,adding roof pitch, roof material selections, popular roof materials">
    <meta name="keywords" content="roof, roofing, roof estimate, roof estimating, squares, roofcalculator, certifaction, change order, roof materials, skylight">
<meta name="rating" content="General">
<meta name="robots" content="Index, follow">
<meta name="revisit-after" content="30 days">
<link href="http://roofgenius.com/roof.css" rel="stylesheet" type="text/css">
<style type= "text/css">
 #container {     
      width:480px;
      }
  .lefttable table{
   border-collapse: collapse;
   margin-left:5px;
	margin-right:5px;
   }
	  
.lefttable{
width:230px;
	margin-top:10px;	
	margin-left:5px;
	margin-right:5px;	
	 }
	 
.lefttable h5{
height:14px;
	color:#FFF;
	font:bold 12px Arial, Helvetica, sans-serif;
	background:#0066ff;
	text-align:center;
	padding-top:4px;
	padding-bottom: 6px;
	width:220px;
 }
  
 .lefttable table td{
 border-style:solid;
 border:1px solid #9E9E9E;
  width: 230px;
 height: 14px;
 padding-left:3px;
 padding-bottom:3px; 
  }
  
  
  
  
  
  
 .righttable table{
   border-collapse: collapse;
   margin-left:5px;
	margin-right:5px;
   }
	  
.righttable{
width:230px;
	margin-top:10px;		
	 }
	 
.righttable h5{
height:14px;
	color:#FFF;
	font:bold 12px Arial, Helvetica, sans-serif;
	background:#0066ff;
	text-align:center;
	padding-top:4px;
	padding-bottom: 6px;
	width:220px;
 }
  
 .righttable table td{
 border-style:solid;
 border:1px solid #9E9E9E;
  width: 230px;
 height: 14px;
 padding-left:3px;
 padding-bottom:3px; 
  }

  .lefttable, .righttable{float:left;}
 
</style>
 <!-- Internet Explorer HTML5 enabling code: -->
        
        <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        
        <style type="text/css">
        .clear {
          zoom: 1;
          display: block;
        }
        </style>        
        <![endif]-->        





</head>
<body>
	<div id="wrapper">
    	<header>
        	<div class="header_area">
            	<div class="header_box1">
            	<div style="margin-top: 50px">
                <img src="http://roofgenius.com/images/rglogo105x54.jpg"  alt="Roofing estimates fast and easy" width="105" height="54">
               </div>
 </div><!--header_box1-->                
                <div class="header_box2">               
                <h1>Roof Estimating</h1>
                <h2>Put a roofing estimate together in under 2 minutes and get a complete roof material list !</h2>
                <!--hgroup-->
                <div class="ad_area">
               
<script type="text/javascript"><!--
google_ad_client = "ca-pub-5860242097775343";
/* Banner468x60 */
google_ad_slot = "6605322965";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>



                </div>
                <h3>Instant Bids for Comp Shingles, Shakes, Tile, Metal and all others !</h3>
                <p>Site Map</p>                
                </div><!--header_box2-->                
                <div class="header_box3">
                	<figure>                	            
             <div style="margin-top: 10px">
                	<img src="http://roofgenius.com/images/pitchfinder.jpg" alt="Pitch Angle finder" width="140" height="146">       	 
                  </div>
				   <figcaption>                                          
                        <h1 style="margin-right: 25px;">Read more <a href="http://roofgenius.com/roofangle.htm">Here</a> </h1>                                  
                        </figcaption>                                             
                    </figure>
                </div><!--header_box3-->
              </div>  
            </header>
            <div style="clear:both;"></div>			
            <hr>
			</div>            
            <section>
        <div class="section_area">
        	<aside class="leftpanel">
            	<h1 style="text-align: center">Roofing bids <span style="color:#F00;font-style:italic;"> fast !</span></h1>
                <div class="roof_estimating">
                <h1>Roof Estimating</h1>
                <ul>
<li><a href="http://roofgenius.com/Download.asp">Downloads</a></li>
<li><a href="http://roofgenius.com/about.htm">About RoofCalcWriter</a></li>
<li><a href="http://roofgenius.com/indepth.htm">Using RoofCalcWriter</a></li>
<li><a href="http://roofgenius.com/Buy.asp">Buy</a></li>
<li><a href="http://roofgenius.com/estimatesheet.htm">Sample estimate sheet</a></li>
<li><a href="http://roofgenius.com/Addressbook.asp">Address Book</a></li>
<li><a href="http://roofgenius.com/Price_Per_Sq_Pages/PricePerSq.htm">$PerSquare Worksheet</a></li>
<li><a href="http://roofgenius.com/Classy-Writer.asp">Roofing Proposal</a></li>
<li><a href="http://roofgenius.com/Faq.asp">RoofCalculator Faq</a></li>
<li> <a href="http://roofgenius.com/Versions.asp">Version History</a></li>
<li><a href="http://roofgenius.com/sidebyside.asp">Compare Software</a></li>
<li><a href="http://roofgenius.com/SiteMap.asp">Site Map</a></li>                  
	</ul>

                 
                </div><!--roof_estimating-->                
                <div class="roof_estimating">
                <h1>Roofing Tips-How-to</h1>
                   <ul>
  <li><a href="http://roofgenius.com/roofpitch.htm">Determine pitch</a></li>
  <li><a href="http://roofgenius.com/measureroof.htm">Measure a roof</a></li>
  <li><a href="http://roofgenius.com/RoofPlan.htm">Measure roof plans</a></li>
  <li><a href="http://roofgenius.com/tipsmeasureroof.htm">Roof measuring tips</a></li>
  <li><a href="http://roofgenius.com/PlanTips.htm">Plan measuring tips</a></li>
  <li><a href="http://roofgenius.com/Product.asp">Roofing Tools</a></li>
  <li><a href="http://roofgenius.com/books.asp">Roofing books</a></li>
  <li><a href="http://roofgenius.com/Tarps.asp">Roofing Tarps</a></li>
  <li><a href="http://roofgenius.com/roof-design.asp">Roof design</a></li>
  <li><a href="http://roofgenius.com/roof-material-selections.asp">Material selection guide</a></li>
  <li><a href="http://roofgenius.com/roof-pitch-degrees.asp">Pitch-degrees equivalents</a></li>
  <li><a href="http://roofgenius.com/add-for-pitch.asp">Amount to add for pitch</a></li>
   <li><a href="http://roofgenius.com/RoofInfo/TipsHowToMenuPage.asp">More tips HowTos</a></li>                 
	</ul>


                </div><!--roof_estimating-->                
                <div class="popular_roof">
                <h1>Popular Roof Materials</h1>
                <div class="popular_area">
                <p>This article covers the positive and negative features of the following 
                <a
                href="http://roofgenius.com/roofmaterialchoices.htm"> roofing materials.</a></p> 
                <ul>
  <li><a href="http://roofgenius.com/roofmaterialchoices.htm#comp">Composition  Shingles</a></li>
  <li><a href="http://roofgenius.com/roofmaterialchoices.htm#shake">Wood shakes</a></li>
  <li><a href="http://roofgenius.com/roofmaterialchoices.htm#clay">Clay Tile</a></li>
  <li><a href="http://roofgenius.com/roofmaterialchoices.htm#slate">Slate</a></li>
  <li><a href="http://roofgenius.com/roofmaterialchoices.htm#concrete">Concrete Tile</a></li>
  <li><a href="http://roofgenius.com/roofmaterialchoices.htm#metal">Metal</a></li>
  <li><a href="http://roofgenius.com/roofmaterialchoices.htm#hotmop">Hot Mop</a></li>                              
	</ul>

						
                <div class="roofing_tool">
                    <a href="http://roofgenius.com/Product.asp">
                    <img src="http://roofgenius.com/images/RoofingTools.jpg" alt="Roofing tools" width="98" height="80" class="center"></a>
                    <p>Roofing Tools <a href="http://roofgenius.com/Product.asp">here</a></p> 
                </div><!--roofing_tool-->                
                </div><!--popular_area-->
                </div><!--popular_roof-->  
				<div style="text-align: center; margin-top: 30px;">        
                
<script type="text/javascript"><!--
google_ad_client = "ca-pub-5860242097775343";
/* verticalBanner120x240 */
google_ad_slot = "8018337365";
google_ad_width = 120;
google_ad_height = 240;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>








                </div>
            </aside><!--leftpanel-->            
    <article class="middlepanel">
	<div id="container">
         <div class="lefttable">
		 <h5>Roofing Tips, How To's</h5>
		 <table>
		 <tr>
		 <td><a href="roofpitch.htm">Determine Pitch</a></td>
		 </tr>
		  <tr>
                <td>
                  <a href="measureroof.htm">Measure a roof</a>
                </td>
              </tr>
			   <tr>
                <td>
                  <a href="RoofPlan.htm">Measure roof plans</a>
                </td>
              </tr>
			   <tr>
                <td>
                  <a href="Tipsmeasureroof.htm">Roof measuring tips</a>
                </td>
              </tr>
			  <tr>
                <td>
                  <a href="PlanTips.htm">Plan measuring tips</a>
                </td>
              </tr>
			  <tr>
                <td>
                  <a href="findroofleak.asp">Find a roof leak</a>
                </td>
              </tr>
			   <tr>
                <td>
                  <a href="attic-ventilation.asp">Attic ventilation tips</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="whole-house-fans.asp">About whole house fans</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="measure-roof-from-ground.asp">Measure from the ground</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Roofing-contractor.asp">Select a roofing contractor</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofingSquare.asp">What is a roofing square ?</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofInfo/WalkRoofPitch.asp">Walk Different Roof Pitches</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/MetalLipBender.asp">Sheet metal lip bender</a>
                </td>
              </tr>
			  <tr>
                <td>
                  <a href="RoofCalcWriter/CounterFlashings.asp">Bend Counter Flashings</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofInfo/InstallDormerVent.asp">Install a Dormer Vent</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofInfo/WalkTileRoof.asp">How to Walk on a tile roof</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="CutCompShingles.asp">Cut Comp Shingles</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Replace_Skylight.asp">Replace a Skylight</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="OSB-Shingle-Helper-Tool.asp">OSB Helper Tool</a>
                </td>
              </tr>
            </table>
		 </div><!--lefttable-->
		 
		 
		
		 <div class="lefttable">
		 <h5>Roofing Information</h5>
		 <table>
		 <tr>
                <td>
                  <a href="RoofInfo/Roof-Terminology.asp">Roof Terminology</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Roof-maintenance.asp">Roof Maintenance</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Roof-Pitch-Examples.asp">Roof pitch visual examples</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="add-for-pitch.asp">Amount to add for pitch</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="roof-pitch-degrees.asp">Pitch degrees equivalents</a>
                </td>
              </tr>
			   <tr>
                <td>
                  <a href="Product.asp">Roofing tools</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="roofangle.htm">Roof Pitch Finder</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="moreanglefinders.asp">Angle finder quantity discounts</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="books.asp">Books</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/Tarps.asp">Tarps</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/nails-per-square.asp">How many nails per square</a>
                </td>
              </tr>
			   <tr>
                <td>
                  <a href="http://roofgenius.com/roof_nail_size.asp">Nail sizes</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/all-nails.asp">Nail specifications</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/estimatesheet.htm">Sample estimate sheet</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/BlankPricePerSq.htm">Blank Estimate sheet</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/Price_Per_Sq_Pages/PricePerSq.htm">Price per square worksheet</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/roof-material-selections.asp">Roof material selection guide</a>
                </td>
              </tr>
			  <tr>
                <td>
                  <a href="http://roofgenius.com/roof-design.asp">Roof design</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/roofpitchfacts.asp">Why should I know my roof pitch?</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/4_12%20Roof_Pitch.asp">4/12 Roof Pitch</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/5_12%20Roof_Pitch.asp">5/12 Roof Pitch</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/6_12%20Roof_Pitch.asp">6/12 Roof Pitch</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/7_12%20Roof_Pitch.asp">7/12 Roof Pitch</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/8_12%20Roof_Pitch.asp">8/12 Roof Pitch</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/9_12%20Roof_Pitch.asp">9/12 Roof Pitch</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/10_12%20Roof_Pitch.asp">10/12 Roof Pitch</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/12_12%20Roof_Pitch.asp">12/12 Roof Pitch</a>
                </td>
              </tr>		 
           </table>    
			</div><!--lefttable-->
			
		
			 <div class="lefttable">
			<h5>Popular Roof Materials</h5>
			<table>
			<tr>
                <td>
                  <a href="http://roofgenius.com/roofmaterialchoices.htm#comp">Composition Shingles</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/roofmaterialchoices.htm#shake">Wood shakes</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/roofmaterialchoices.htm#clay">Clay tile</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/roofmaterialchoices.htm#slate">Slate</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/roofmaterialchoices.htm#concrete">Concrete tile</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/roofmaterialchoices.htm#metal">Metal</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/roofmaterialchoices.htm#hotmop">Hot Mop</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="roofmaterialchoices.htm#closing">Be wary</a>
                </td>
              </tr>
            </table>	
			</div><!--lefttable-->	
				
		
			 <div class="lefttable">
			<h5>General Information</h5>
			<table>
			 <tr>
                <td>
                  <a href="http://roofgenius.com/index.htm">Home page</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/about.htm">About RoofCalculator</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/aboutroofgenius.asp">About us</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/Privacy.htm">Your privacy</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/links.htm">Links</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/support.asp">Support</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/paypalabout.htm">About PayPal</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/ReturnPolicy.asp">Return policy</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/credit_application.asp">Credit application</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="javascript:void(0);" onclick="window.open('mailto:'+ 'service' + '@' +  'roofgenius.com','_self'); return false;">Email Us</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/RoofInfo/UpgradePolicy.asp">Upgrade Policy</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/LinkInput.asp">Add your link</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/RoofInfo/Cheatingroofcontractors.asp">Cheating Roofing Contractors</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/RoofInfo/build-reputation.asp">Build your reputation</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/pop_servers.asp">Pop Servers</a>
                </td>
              </tr>
            </table>
			</div><!--lefttable-->
				
			<div class="righttable" style="float:right">
		 <h5>Roofing Software Information</h5>
		 <table>
		  <tr>
                <td>
                  <a href="http://roofgenius.com/Download.asp">Downloads</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/DownloadFaq.asp">Faq Downloading</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/orderprocess.asp">The software order process</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="buy.asp">Buy software</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/ProgramUpdates.asp">Program updates</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="SideBySide.asp">Compare software</a></td>
              </tr>
              <tr>
                <td>
                  <a href="Versions.asp">Version history</a>
                </td>
              </tr>
              <tr>
                <td>                  
                  <a href="RoofCalcWriter/Faq_Registration.asp">registration</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Faq.asp">Faq using software</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofInfo/ContextSensitiveHelp.asp">Context Sensitive help</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/Buy_Software_Guide.asp">Software buying guide</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/DiscontinuedSoftware.asp">Discontinued software</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/RoofCalcWriter/ComingSoon.asp">Coming Soon</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/RoofEstimatingVideos.asp">Roofing Video Listings</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/Addbid%20numbers%2002_12_10.asp">Enter Bid Numbers Video</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/Edit%20Job%20Cost%20Templates%2002_25_10.asp">Edit Job Cost Grid Video
                  </a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/DetailCost.asp">Detail Pricing Video</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/Paragraphs_Sentences.asp">Create Paragraphs-Sentences Video</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/AddLogo.asp">Add Logo, Design Documents Video </a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/PPS.asp">Add-edit Price Per Square Video</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/HelpVideo.asp">Context Sensitive help video</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/PriceList.asp">Edit Roofing Price List video</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/WorkOrder.asp">Create work order video</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/EmailProposal.asp">Email Roofing Proposal Video</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/Options.asp">Enter Roofing Options Video</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/QuickBid.asp">Using Quick Bid Video</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="PDF/RoofCalcWriter.pdf">RoofCalcWriter Help File PDF format</a>
                </td>
              </tr>
            </table><!--Roofing Software Information-->		 
		 </div><!--righttable-->
		 
		
		<div class="righttable" >
		 <h5>RoofCalcWriter</h5>
		 <table>
		    <tr>
                <td>
                  <a href="RoofCalcWriter/OverviewRCalculator7.asp">Overview</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/WhatsNew.asp">What's new</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/6MainScreens.asp">The 6 main screens</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/OverviewRoofCalcWriter.asp">RoofCalcWriter overview</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="indepth.htm">Using RoofCalWriter</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/PerSq_vs_DetailPricing.asp">Detail or Per square pricing ?</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/DoEstimate1.asp">Step by step Per square pricing mode</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/DoEstimateDetail.asp">Step by Step Detail pricing mode</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/AutoFillFromJobCost.asp">Put calculations into detail cost</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/Detail%20Pricing%20Using.asp">Using detail pricing</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/DetailPricing.asp">More on detail pricing</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/QuickBid.asp">Using Quick Bid</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/PriceListManaging.asp">Managing the price list</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/JobCostGrid.asp">Job Cost grid</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/Templates_Using.asp">Job Cost templates</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/WorkOrder.asp">Creating work orders</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/NumbersDetail.asp">Number details viewer</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/Pitch_Waste_Details.asp">Waste and pitch details viewer</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/CopyPrice_Per_Sq_Prices.asp">Using prices from price per square</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/Ridge_on_Rakes.asp">Ridge on rakes</a>
                    </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/Grid_Terminology.asp">Grid terminology</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/Adding_RoofPitch.asp">Adding roof pitch</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/How_Sqs_Are_Totaled.asp">How squares are totaled</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/CellViewer.asp">Using cell viewer</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Addressbook.asp">Address book</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/Options.asp">Options</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/PrintRoofCalculator.asp">Print RoofCalculator</a>
                </td>
              </tr>
              <tr>
                <td>				
                  <a href="http://roofgenius.com/RoofCalcWriter/ScreenShotRCWriter.asp">Screenshot</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/Ideas-recommendations.asp">Send Ideas, Recommendations</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/FlashBackup.asp">Usb-Flash drive backup</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/RoofCalcWriter10.asp">More on Roofcalcwriter 10</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Download.asp">Try it free</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/PopUpCalculators.asp">Popup Calculators</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="SaveAs.asp">Saving bids to different folders</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/RCHelperWindows.asp">Main Screen helper windows</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/DetailCostHelperWindows.asp">Detail Pricing Helper Windows</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/WorkOrderHelperWindow.asp">Work Order helper window</a>
                </td>
              </tr>
            </table>
			</div><!--righttable-->
			
			 <div style="margin-top:15px"></div>
		<div class="righttable" style="float:right">
		 <h5>Price Per Square</h5>
		 <table>
		  <tr>
                <td>
                  <a href="Price_Per_Sq_Pages/PricePerSqOverView.asp">Overviewa>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Price_Per_Sq_Pages/Whats_New_Price_Per_Square.asp">What's new</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Price_Per_Sq_Pages/PPS_Getting_Started.asp">Getting started</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Price_Per_Sq_Pages/PPS_Terminology.asp">Grid Terminology</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Price_Per_Sq_Pages/How_Price_per_Sq_Totals_Numbers.asp">How numbers are totaled</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Price_Per_Sq_Pages/Column_Names_PPS.asp">Naming columns</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Price_Per_Sq_Pages/persqtotal.htm">Total Price Per Square screen</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Price_Per_Sq_Pages/persqlabor.htm">Enter labor prices</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Price_Per_Sq_Pages/persqMaterial.htm">Enter material prices</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Price_Per_Sq_Pages/PPS_Felt_Prices.asp">Enter felt prices</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Price_Per_Sq_Pages/persqProfit.htm">Enter profit overhead cleanup</a>
                </td>
              </tr>
            </table>
			</div><!--righttable-->
			
		
		<div class="righttable">
		 <h5>Creating Documents</h5>
		 <table>
			 <tr>
                <td>
                  <a href="RoofCalcWriter/NewFeatureClassyWriter.asp">Document creation features</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Classy-Writer.asp">Getting started</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/SpellCheck.asp">Spell Check</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/DocumentManager.asp">Using Document Manager</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Proposal.asp">Sample roofing proposal</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Invoice.asp">Sample roofing invoice</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="ChangeOrder.asp">Sample roofing change order</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Letter.asp">Sample Letter</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Certification.asp">Sample roof certification</a>
                </td>
              </tr>
            </table>
          </div>
			
					
</div><!--container-->

           <!--<div class="wideimage">-->		   
                 <!--wideimage-->            	
            <!--ad-->            
            </article><!--middlepanel-->
            <aside class="rightpanel">           
           <div class="roof_calcwriter">
                <h1>RoofCalcWriter</h1>
				<ul>
<li><a href="http://roofgenius.com/RoofCalcWriter/WhatsNew.asp">Whats New</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/OverviewRCalculator7.asp">Overview</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/Templates_Using.asp">Using roof templates</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/JobCostGrid.asp">Job Cost Details Grid</a></li>
<li><a href="http://roofgenius.com/Download.asp">Download</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/NumbersDetail.asp">Numbers Detail</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/Pitch_Waste_Details.asp">Pitch-Waste Details</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/CopyPrice_Per_Sq_Prices.asp">Copy Bid Prices</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/CellViewer.asp">Cell Viewer</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/QuickBid.asp">Using Quick Bid</a></li>
<li><a href="http://roofgenius.com/Price_Per_Sq_Pages/Whats_New_Price_Per_Square.asp">New Price Per square</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/Adding_RoofPitch.asp">Add Roof Pitch</a></li>
<li><a href="http://roofgenius.com/buy.asp">Buy RoofCalculator</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/How_Sqs_Are_Totaled.asp">How sqs are totaled</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/Grid_Terminology.asp">Grid Terminology</a></li>
<li><a href="http://roofgenius.com/Faq.asp">Faq</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/RoofCalcWriter10.asp">RoofCalcWriter 10</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/OverviewRoofCalcWriter.asp">Using  RoofCalWriter 10</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/Detail%20Pricing%20Using.asp">Using detail pricing</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/6MainScreens.asp">The 6 main screens</a></li>
<li><a href="http://roofgenius.com/RoofInfo/ContextSensitiveHelp.asp">Context Sensitive Help</a>
</ul>			 

                      
                               </div><!--roof_calcwriter-->
                <div class ="tallskscraper">
				
<script type="text/javascript"><!--
google_ad_client = "ca-pub-5860242097775343";
/* 120x600SkyScrapper */
google_ad_slot = "4407552969";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
               
                </div> 
				<div style="margin-top:40px; margin-left:20px;">        
 <figure>
<a href="http://roofgenius.com/Roof-Pitch-Examples.asp">
<img  src="http://roofgenius.com/images/Pitch12_12.jpg" alt="Roof pitch 12/12" width="148" height="123"></a>			
	<figcaption style="text-align:center; margin-right:83px">                                                   
	<h1>Visual Roof Pitch Examples</h1>
	<p><a href="http://roofgenius.com/Roof-Pitch-Examples.asp">Here</a></p>
	</figcaption>
</figure>
</div>               
            </aside><!--rightpanel-->            
            <hr>
        </div><!--section_area-->
        </section><!--section-->
      <footer>
     	<div class="footer_area">
     	<nav class="nav_area">        
         <div id="footer">
 <div style="text-align: center;">
<a href="http://roofgenius.com/index.htm">Home</a>
| <a href="http://roofgenius.com/aboutroofgenius.asp">About Us</a>
| <a href="http://roofgenius.com/support.asp">Contact Us</a> | 
<a href="http://roofgenius.com/links.htm">Links </a>
|
 <a href="http://roofgenius.com/Privacy.htm"> Your Privacy</a> | 
 <a href="http://roofgenius.com/SiteMap.asp">Site map</a> |

<script type="text/javascript" language="javascript">
var _u = "Rob";
var _d = "roofgenius.com";
var _l = _u + "@" + _d;
var _m = "E-mail Us";
var _a = "<a href=mailto:";
var _e = "<\/a>";
document.write(_a+_l+">"+_m+_e);
</script>
<br>
Copyright &#169; 2002-2013 RoofGenius All rights reserved.<br>
This page last updated 06-12-2013
</div>
        </div>
          </nav>           
        </div><!--footer_area-->
     </footer><!--footer-->  
</body>
</html>

Open in new window

0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 400 total points
Comment Utility
This is my suggesting enclosing the left and right side into their own column.  I used a new class called tabel_col and here is the preview http://jsbin.com/enezuw/2/

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Roofgenius site map</title>
<meta name="description" content="How total squares are totaled, site map, price per square, roof pitch, roof pitch examples,adding roof pitch, roof material selections, popular roof materials">
    <meta name="keywords" content="roof, roofing, roof estimate, roof estimating, squares, roofcalculator, certifaction, change order, roof materials, skylight">
<meta name="rating" content="General">
<meta name="robots" content="Index, follow">
<meta name="revisit-after" content="30 days">
<link href="http://roofgenius.com/roof.css" rel="stylesheet" type="text/css">
<style type= "text/css">
 #container {     
      width:480px;
      }
  .lefttable table{
   border-collapse: collapse;
   margin-left:5px;
	margin-right:5px;
   }
	  
.lefttable{
width:230px;
	margin-top:10px;	
	margin-left:5px;
	margin-right:5px;	
	 }
	 
.lefttable h5{
height:14px;
	color:#FFF;
	font:bold 12px Arial, Helvetica, sans-serif;
	background:#0066ff;
	text-align:center;
	padding-top:4px;
	padding-bottom: 6px;
	width:220px;
 }
  
 .lefttable table td{
 border-style:solid;
 border:1px solid #9E9E9E;
  width: 230px;
 height: 14px;
 padding-left:3px;
 padding-bottom:3px; 
  }
  
  
  
  
  
  
 .righttable table{
   border-collapse: collapse;
   margin-left:5px;
	margin-right:5px;
   }
	  
.righttable{
width:230px;
	margin-top:10px;		
	 }
	 
.righttable h5{
height:14px;
	color:#FFF;
	font:bold 12px Arial, Helvetica, sans-serif;
	background:#0066ff;
	text-align:center;
	padding-top:4px;
	padding-bottom: 6px;
	width:220px;
 }
  
 .righttable table td{
 border-style:solid;
 border:1px solid #9E9E9E;
  width: 230px;
 height: 14px;
 padding-left:3px;
 padding-bottom:3px; 
  }

  .table_col{float:left;}
 
</style>
 <!-- Internet Explorer HTML5 enabling code: -->
        
        <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        
        <style type="text/css">
        .clear {
          zoom: 1;
          display: block;
        }
        </style>        
        <![endif]-->        





</head>
<body>
	<div id="wrapper">
    	<header>
        	<div class="header_area">
            	<div class="header_box1">
            	<div style="margin-top: 50px">
                <img src="http://roofgenius.com/images/rglogo105x54.jpg"  alt="Roofing estimates fast and easy" width="105" height="54">
               </div>
 </div><!--header_box1-->                
                <div class="header_box2">               
                <h1>Roof Estimating</h1>
                <h2>Put a roofing estimate together in under 2 minutes and get a complete roof material list !</h2>
                <!--hgroup-->
                <div class="ad_area">
               
<script type="text/javascript"><!--
google_ad_client = "ca-pub-5860242097775343";
/* Banner468x60 */
google_ad_slot = "6605322965";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>



                </div>
                <h3>Instant Bids for Comp Shingles, Shakes, Tile, Metal and all others !</h3>
                <p>Site Map</p>                
                </div><!--header_box2-->                
                <div class="header_box3">
                	<figure>                	            
             <div style="margin-top: 10px">
                	<img src="http://roofgenius.com/images/pitchfinder.jpg" alt="Pitch Angle finder" width="140" height="146">       	 
                  </div>
				   <figcaption>                                          
                        <h1 style="margin-right: 25px;">Read more <a href="http://roofgenius.com/roofangle.htm">Here</a> </h1>                                  
                        </figcaption>                                             
                    </figure>
                </div><!--header_box3-->
              </div>  
            </header>
            <div style="clear:both;"></div>			
            <hr>
			</div>            
            <section>
        <div class="section_area">
        	<aside class="leftpanel">
            	<h1 style="text-align: center">Roofing bids <span style="color:#F00;font-style:italic;"> fast !</span></h1>
                <div class="roof_estimating">
                <h1>Roof Estimating</h1>
                <ul>
<li><a href="http://roofgenius.com/Download.asp">Downloads</a></li>
<li><a href="http://roofgenius.com/about.htm">About RoofCalcWriter</a></li>
<li><a href="http://roofgenius.com/indepth.htm">Using RoofCalcWriter</a></li>
<li><a href="http://roofgenius.com/Buy.asp">Buy</a></li>
<li><a href="http://roofgenius.com/estimatesheet.htm">Sample estimate sheet</a></li>
<li><a href="http://roofgenius.com/Addressbook.asp">Address Book</a></li>
<li><a href="http://roofgenius.com/Price_Per_Sq_Pages/PricePerSq.htm">$PerSquare Worksheet</a></li>
<li><a href="http://roofgenius.com/Classy-Writer.asp">Roofing Proposal</a></li>
<li><a href="http://roofgenius.com/Faq.asp">RoofCalculator Faq</a></li>
<li> <a href="http://roofgenius.com/Versions.asp">Version History</a></li>
<li><a href="http://roofgenius.com/sidebyside.asp">Compare Software</a></li>
<li><a href="http://roofgenius.com/SiteMap.asp">Site Map</a></li>                  
	</ul>

                 
                </div><!--roof_estimating-->                
                <div class="roof_estimating">
                <h1>Roofing Tips-How-to</h1>
                   <ul>
  <li><a href="http://roofgenius.com/roofpitch.htm">Determine pitch</a></li>
  <li><a href="http://roofgenius.com/measureroof.htm">Measure a roof</a></li>
  <li><a href="http://roofgenius.com/RoofPlan.htm">Measure roof plans</a></li>
  <li><a href="http://roofgenius.com/tipsmeasureroof.htm">Roof measuring tips</a></li>
  <li><a href="http://roofgenius.com/PlanTips.htm">Plan measuring tips</a></li>
  <li><a href="http://roofgenius.com/Product.asp">Roofing Tools</a></li>
  <li><a href="http://roofgenius.com/books.asp">Roofing books</a></li>
  <li><a href="http://roofgenius.com/Tarps.asp">Roofing Tarps</a></li>
  <li><a href="http://roofgenius.com/roof-design.asp">Roof design</a></li>
  <li><a href="http://roofgenius.com/roof-material-selections.asp">Material selection guide</a></li>
  <li><a href="http://roofgenius.com/roof-pitch-degrees.asp">Pitch-degrees equivalents</a></li>
  <li><a href="http://roofgenius.com/add-for-pitch.asp">Amount to add for pitch</a></li>
   <li><a href="http://roofgenius.com/RoofInfo/TipsHowToMenuPage.asp">More tips HowTos</a></li>                 
	</ul>


                </div><!--roof_estimating-->                
                <div class="popular_roof">
                <h1>Popular Roof Materials</h1>
                <div class="popular_area">
                <p>This article covers the positive and negative features of the following 
                <a
                href="http://roofgenius.com/roofmaterialchoices.htm"> roofing materials.</a></p> 
                <ul>
  <li><a href="http://roofgenius.com/roofmaterialchoices.htm#comp">Composition  Shingles</a></li>
  <li><a href="http://roofgenius.com/roofmaterialchoices.htm#shake">Wood shakes</a></li>
  <li><a href="http://roofgenius.com/roofmaterialchoices.htm#clay">Clay Tile</a></li>
  <li><a href="http://roofgenius.com/roofmaterialchoices.htm#slate">Slate</a></li>
  <li><a href="http://roofgenius.com/roofmaterialchoices.htm#concrete">Concrete Tile</a></li>
  <li><a href="http://roofgenius.com/roofmaterialchoices.htm#metal">Metal</a></li>
  <li><a href="http://roofgenius.com/roofmaterialchoices.htm#hotmop">Hot Mop</a></li>                              
	</ul>

						
                <div class="roofing_tool">
                    <a href="http://roofgenius.com/Product.asp">
                    <img src="http://roofgenius.com/images/RoofingTools.jpg" alt="Roofing tools" width="98" height="80" class="center"></a>
                    <p>Roofing Tools <a href="http://roofgenius.com/Product.asp">here</a></p> 
                </div><!--roofing_tool-->                
                </div><!--popular_area-->
                </div><!--popular_roof-->  
				<div style="text-align: center; margin-top: 30px;">        
                
<script type="text/javascript"><!--
google_ad_client = "ca-pub-5860242097775343";
/* verticalBanner120x240 */
google_ad_slot = "8018337365";
google_ad_width = 120;
google_ad_height = 240;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>








                </div>
            </aside><!--leftpanel-->            
    <article class="middlepanel">
	<div id="container">
      <div class="table_col">
         <div class="lefttable">
		 <h5>Roofing Tips, How To's</h5>
		 <table>
		 <tr>
		 <td><a href="roofpitch.htm">Determine Pitch</a></td>
		 </tr>
		  <tr>
                <td>
                  <a href="measureroof.htm">Measure a roof</a>
                </td>
              </tr>
			   <tr>
                <td>
                  <a href="RoofPlan.htm">Measure roof plans</a>
                </td>
              </tr>
			   <tr>
                <td>
                  <a href="Tipsmeasureroof.htm">Roof measuring tips</a>
                </td>
              </tr>
			  <tr>
                <td>
                  <a href="PlanTips.htm">Plan measuring tips</a>
                </td>
              </tr>
			  <tr>
                <td>
                  <a href="findroofleak.asp">Find a roof leak</a>
                </td>
              </tr>
			   <tr>
                <td>
                  <a href="attic-ventilation.asp">Attic ventilation tips</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="whole-house-fans.asp">About whole house fans</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="measure-roof-from-ground.asp">Measure from the ground</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Roofing-contractor.asp">Select a roofing contractor</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofingSquare.asp">What is a roofing square ?</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofInfo/WalkRoofPitch.asp">Walk Different Roof Pitches</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/MetalLipBender.asp">Sheet metal lip bender</a>
                </td>
              </tr>
			  <tr>
                <td>
                  <a href="RoofCalcWriter/CounterFlashings.asp">Bend Counter Flashings</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofInfo/InstallDormerVent.asp">Install a Dormer Vent</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofInfo/WalkTileRoof.asp">How to Walk on a tile roof</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="CutCompShingles.asp">Cut Comp Shingles</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Replace_Skylight.asp">Replace a Skylight</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="OSB-Shingle-Helper-Tool.asp">OSB Helper Tool</a>
                </td>
              </tr>
            </table>
		 </div><!--lefttable-->
		 
		 
		
		 <div class="lefttable">
		 <h5>Roofing Information</h5>
		 <table>
		 <tr>
                <td>
                  <a href="RoofInfo/Roof-Terminology.asp">Roof Terminology</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Roof-maintenance.asp">Roof Maintenance</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Roof-Pitch-Examples.asp">Roof pitch visual examples</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="add-for-pitch.asp">Amount to add for pitch</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="roof-pitch-degrees.asp">Pitch degrees equivalents</a>
                </td>
              </tr>
			   <tr>
                <td>
                  <a href="Product.asp">Roofing tools</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="roofangle.htm">Roof Pitch Finder</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="moreanglefinders.asp">Angle finder quantity discounts</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="books.asp">Books</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/Tarps.asp">Tarps</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/nails-per-square.asp">How many nails per square</a>
                </td>
              </tr>
			   <tr>
                <td>
                  <a href="http://roofgenius.com/roof_nail_size.asp">Nail sizes</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/all-nails.asp">Nail specifications</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/estimatesheet.htm">Sample estimate sheet</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/BlankPricePerSq.htm">Blank Estimate sheet</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/Price_Per_Sq_Pages/PricePerSq.htm">Price per square worksheet</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/roof-material-selections.asp">Roof material selection guide</a>
                </td>
              </tr>
			  <tr>
                <td>
                  <a href="http://roofgenius.com/roof-design.asp">Roof design</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/roofpitchfacts.asp">Why should I know my roof pitch?</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/4_12%20Roof_Pitch.asp">4/12 Roof Pitch</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/5_12%20Roof_Pitch.asp">5/12 Roof Pitch</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/6_12%20Roof_Pitch.asp">6/12 Roof Pitch</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/7_12%20Roof_Pitch.asp">7/12 Roof Pitch</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/8_12%20Roof_Pitch.asp">8/12 Roof Pitch</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/9_12%20Roof_Pitch.asp">9/12 Roof Pitch</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/10_12%20Roof_Pitch.asp">10/12 Roof Pitch</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/12_12%20Roof_Pitch.asp">12/12 Roof Pitch</a>
                </td>
              </tr>		 
           </table>    
			</div><!--lefttable-->
			
		
			 <div class="lefttable">
			<h5>Popular Roof Materials</h5>
			<table>
			<tr>
                <td>
                  <a href="http://roofgenius.com/roofmaterialchoices.htm#comp">Composition Shingles</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/roofmaterialchoices.htm#shake">Wood shakes</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/roofmaterialchoices.htm#clay">Clay tile</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/roofmaterialchoices.htm#slate">Slate</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/roofmaterialchoices.htm#concrete">Concrete tile</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/roofmaterialchoices.htm#metal">Metal</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/roofmaterialchoices.htm#hotmop">Hot Mop</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="roofmaterialchoices.htm#closing">Be wary</a>
                </td>
              </tr>
            </table>	
			</div><!--lefttable-->	
				
		
			 <div class="lefttable">
			<h5>General Information</h5>
			<table>
			 <tr>
                <td>
                  <a href="http://roofgenius.com/index.htm">Home page</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/about.htm">About RoofCalculator</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/aboutroofgenius.asp">About us</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/Privacy.htm">Your privacy</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/links.htm">Links</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/support.asp">Support</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/paypalabout.htm">About PayPal</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/ReturnPolicy.asp">Return policy</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/credit_application.asp">Credit application</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="javascript:void(0);" onclick="window.open('mailto:'+ 'service' + '@' +  'roofgenius.com','_self'); return false;">Email Us</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/RoofInfo/UpgradePolicy.asp">Upgrade Policy</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/LinkInput.asp">Add your link</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/RoofInfo/Cheatingroofcontractors.asp">Cheating Roofing Contractors</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/RoofInfo/build-reputation.asp">Build your reputation</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/pop_servers.asp">Pop Servers</a>
                </td>
              </tr>
            </table>
			</div><!--lefttable-->
      </div> <!--    <div class="table_col"> -->	
            <div class="table_col">
        
        
			<div class="righttable" style="float:right">
		 <h5>Roofing Software Information</h5>
		 <table>
		  <tr>
                <td>
                  <a href="http://roofgenius.com/Download.asp">Downloads</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/DownloadFaq.asp">Faq Downloading</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/orderprocess.asp">The software order process</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="buy.asp">Buy software</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/ProgramUpdates.asp">Program updates</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="SideBySide.asp">Compare software</a></td>
              </tr>
              <tr>
                <td>
                  <a href="Versions.asp">Version history</a>
                </td>
              </tr>
              <tr>
                <td>                  
                  <a href="RoofCalcWriter/Faq_Registration.asp">registration</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Faq.asp">Faq using software</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofInfo/ContextSensitiveHelp.asp">Context Sensitive help</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/Buy_Software_Guide.asp">Software buying guide</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/DiscontinuedSoftware.asp">Discontinued software</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="http://roofgenius.com/RoofCalcWriter/ComingSoon.asp">Coming Soon</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/RoofEstimatingVideos.asp">Roofing Video Listings</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/Addbid%20numbers%2002_12_10.asp">Enter Bid Numbers Video</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/Edit%20Job%20Cost%20Templates%2002_25_10.asp">Edit Job Cost Grid Video
                  </a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/DetailCost.asp">Detail Pricing Video</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/Paragraphs_Sentences.asp">Create Paragraphs-Sentences Video</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/AddLogo.asp">Add Logo, Design Documents Video </a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/PPS.asp">Add-edit Price Per Square Video</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/HelpVideo.asp">Context Sensitive help video</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/PriceList.asp">Edit Roofing Price List video</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/WorkOrder.asp">Create work order video</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/EmailProposal.asp">Email Roofing Proposal Video</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/Options.asp">Enter Roofing Options Video</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Videos/QuickBid.asp">Using Quick Bid Video</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="PDF/RoofCalcWriter.pdf">RoofCalcWriter Help File PDF format</a>
                </td>
              </tr>
            </table><!--Roofing Software Information-->		 
		 </div><!--righttable-->
		 
		
		<div class="righttable" >
		 <h5>RoofCalcWriter</h5>
		 <table>
		    <tr>
                <td>
                  <a href="RoofCalcWriter/OverviewRCalculator7.asp">Overview</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/WhatsNew.asp">What's new</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/6MainScreens.asp">The 6 main screens</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/OverviewRoofCalcWriter.asp">RoofCalcWriter overview</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="indepth.htm">Using RoofCalWriter</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/PerSq_vs_DetailPricing.asp">Detail or Per square pricing ?</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/DoEstimate1.asp">Step by step Per square pricing mode</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/DoEstimateDetail.asp">Step by Step Detail pricing mode</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/AutoFillFromJobCost.asp">Put calculations into detail cost</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/Detail%20Pricing%20Using.asp">Using detail pricing</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/DetailPricing.asp">More on detail pricing</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/QuickBid.asp">Using Quick Bid</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/PriceListManaging.asp">Managing the price list</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/JobCostGrid.asp">Job Cost grid</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/Templates_Using.asp">Job Cost templates</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/WorkOrder.asp">Creating work orders</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/NumbersDetail.asp">Number details viewer</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/Pitch_Waste_Details.asp">Waste and pitch details viewer</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/CopyPrice_Per_Sq_Prices.asp">Using prices from price per square</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/Ridge_on_Rakes.asp">Ridge on rakes</a>
                    </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/Grid_Terminology.asp">Grid terminology</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/Adding_RoofPitch.asp">Adding roof pitch</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/How_Sqs_Are_Totaled.asp">How squares are totaled</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/CellViewer.asp">Using cell viewer</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Addressbook.asp">Address book</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/Options.asp">Options</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/PrintRoofCalculator.asp">Print RoofCalculator</a>
                </td>
              </tr>
              <tr>
                <td>				
                  <a href="http://roofgenius.com/RoofCalcWriter/ScreenShotRCWriter.asp">Screenshot</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/Ideas-recommendations.asp">Send Ideas, Recommendations</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/FlashBackup.asp">Usb-Flash drive backup</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/RoofCalcWriter10.asp">More on Roofcalcwriter 10</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Download.asp">Try it free</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/PopUpCalculators.asp">Popup Calculators</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="SaveAs.asp">Saving bids to different folders</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/RCHelperWindows.asp">Main Screen helper windows</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/DetailCostHelperWindows.asp">Detail Pricing Helper Windows</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/WorkOrderHelperWindow.asp">Work Order helper window</a>
                </td>
              </tr>
            </table>
			</div><!--righttable-->
			
			 <div style="margin-top:15px"></div>
		<div class="righttable" style="float:right">
		 <h5>Price Per Square</h5>
		 <table>
		  <tr>
                <td>
                  <a href="Price_Per_Sq_Pages/PricePerSqOverView.asp">Overviewa>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Price_Per_Sq_Pages/Whats_New_Price_Per_Square.asp">What's new</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Price_Per_Sq_Pages/PPS_Getting_Started.asp">Getting started</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Price_Per_Sq_Pages/PPS_Terminology.asp">Grid Terminology</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Price_Per_Sq_Pages/How_Price_per_Sq_Totals_Numbers.asp">How numbers are totaled</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Price_Per_Sq_Pages/Column_Names_PPS.asp">Naming columns</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Price_Per_Sq_Pages/persqtotal.htm">Total Price Per Square screen</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Price_Per_Sq_Pages/persqlabor.htm">Enter labor prices</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Price_Per_Sq_Pages/persqMaterial.htm">Enter material prices</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Price_Per_Sq_Pages/PPS_Felt_Prices.asp">Enter felt prices</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Price_Per_Sq_Pages/persqProfit.htm">Enter profit overhead cleanup</a>
                </td>
              </tr>
            </table>
			</div><!--righttable-->
			
		
		<div class="righttable">
		 <h5>Creating Documents</h5>
		 <table>
			 <tr>
                <td>
                  <a href="RoofCalcWriter/NewFeatureClassyWriter.asp">Document creation features</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Classy-Writer.asp">Getting started</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/SpellCheck.asp">Spell Check</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="RoofCalcWriter/DocumentManager.asp">Using Document Manager</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Proposal.asp">Sample roofing proposal</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Invoice.asp">Sample roofing invoice</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="ChangeOrder.asp">Sample roofing change order</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Letter.asp">Sample Letter</a>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="Certification.asp">Sample roof certification</a>
                </td>
              </tr>
            </table>
          </div>
      </div> <!--     <div class="table_col"> -->	
					
</div><!--container-->

           <!--<div class="wideimage">-->		   
                 <!--wideimage-->            	
            <!--ad-->            
            </article><!--middlepanel-->
            <aside class="rightpanel">           
           <div class="roof_calcwriter">
                <h1>RoofCalcWriter</h1>
				<ul>
<li><a href="http://roofgenius.com/RoofCalcWriter/WhatsNew.asp">Whats New</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/OverviewRCalculator7.asp">Overview</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/Templates_Using.asp">Using roof templates</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/JobCostGrid.asp">Job Cost Details Grid</a></li>
<li><a href="http://roofgenius.com/Download.asp">Download</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/NumbersDetail.asp">Numbers Detail</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/Pitch_Waste_Details.asp">Pitch-Waste Details</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/CopyPrice_Per_Sq_Prices.asp">Copy Bid Prices</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/CellViewer.asp">Cell Viewer</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/QuickBid.asp">Using Quick Bid</a></li>
<li><a href="http://roofgenius.com/Price_Per_Sq_Pages/Whats_New_Price_Per_Square.asp">New Price Per square</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/Adding_RoofPitch.asp">Add Roof Pitch</a></li>
<li><a href="http://roofgenius.com/buy.asp">Buy RoofCalculator</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/How_Sqs_Are_Totaled.asp">How sqs are totaled</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/Grid_Terminology.asp">Grid Terminology</a></li>
<li><a href="http://roofgenius.com/Faq.asp">Faq</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/RoofCalcWriter10.asp">RoofCalcWriter 10</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/OverviewRoofCalcWriter.asp">Using  RoofCalWriter 10</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/Detail%20Pricing%20Using.asp">Using detail pricing</a></li>
<li><a href="http://roofgenius.com/RoofCalcWriter/6MainScreens.asp">The 6 main screens</a></li>
<li><a href="http://roofgenius.com/RoofInfo/ContextSensitiveHelp.asp">Context Sensitive Help</a>
</ul>			 

                      
                               </div><!--roof_calcwriter-->
                <div class ="tallskscraper">
				
<script type="text/javascript"><!--
google_ad_client = "ca-pub-5860242097775343";
/* 120x600SkyScrapper */
google_ad_slot = "4407552969";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
               
                </div> 
				<div style="margin-top:40px; margin-left:20px;">        
 <figure>
<a href="http://roofgenius.com/Roof-Pitch-Examples.asp">
<img  src="http://roofgenius.com/images/Pitch12_12.jpg" alt="Roof pitch 12/12" width="148" height="123"></a>			
	<figcaption style="text-align:center; margin-right:83px">                                                   
	<h1>Visual Roof Pitch Examples</h1>
	<p><a href="http://roofgenius.com/Roof-Pitch-Examples.asp">Here</a></p>
	</figcaption>
</figure>
</div>               
            </aside><!--rightpanel-->            
            <hr>
        </div><!--section_area-->
        </section><!--section-->
      <footer>
     	<div class="footer_area">
     	<nav class="nav_area">        
         <div id="footer">
 <div style="text-align: center;">
<a href="http://roofgenius.com/index.htm">Home</a>
| <a href="http://roofgenius.com/aboutroofgenius.asp">About Us</a>
| <a href="http://roofgenius.com/support.asp">Contact Us</a> | 
<a href="http://roofgenius.com/links.htm">Links </a>
|
 <a href="http://roofgenius.com/Privacy.htm"> Your Privacy</a> | 
 <a href="http://roofgenius.com/SiteMap.asp">Site map</a> |

<script type="text/javascript" language="javascript">
var _u = "Rob";
var _d = "roofgenius.com";
var _l = _u + "@" + _d;
var _m = "E-mail Us";
var _a = "<a href=mailto:";
var _e = "<\/a>";
document.write(_a+_l+">"+_m+_e);
</script>
<br>
Copyright &#169; 2002-2013 RoofGenius All rights reserved.<br>
This page last updated 06-12-2013
</div>
        </div>
          </nav>           
        </div><!--footer_area-->
     </footer><!--footer-->  
</body>
</html>

Open in new window

0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
Just my own opinion, I think you can loose the google ad on the bottom left.  If you start getting too many ads the site looks spammy.   I would make your right side add the wider unite so it looks more like your content.  I think you can have image ads in the wider format too.
0
 
LVL 42

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 100 total points
Comment Utility
You need to remove those empty DIVs - they serve no purpose. You then need to remove the inline styling on the .righttable and add the following rule to your stylesheet:

#container > div {
    float: left;
    margin: 10px 5px 5px;
    width: 230px;
}

Open in new window

You also need to add overflow:hidden to the #container rule:

#container {
    overflow: hidden;
    width: 480px;
}

Open in new window

0
 

Author Closing Comment

by:isnoend2001
Comment Utility
Thanks Padas
 I woke this AM thinking about trying to add the columns of tables into separate divisions after fighting floats all day yesterday. Then your code works perfectly.
I occasionally get emails from google with a list of pages with less than 3 adds with a suggestion to use 3 adds to increase revenue. I am on page 97 of 165 pages restyling my old 10 yr table based site made with FrontPage with html5. Frontpage  wrote all the HTML, i never learned html I now see how sloppy the code was written
I hired a coder from Freelancer to create the first page and have used it as a template. I tried changing his page layout with no success. With so many pages to restyle I have decided to stay in the confines of his layout get the site done and maybe attempt to change
some page when done.

Thanks ChrisStanyon I have used those empty divisions on many pages to create space, mostly where a paragraph hits an image. using the <p> tag before an image I was at a loss
as to where to end the </p>. It was a question i asked here about a month ago. It seems like an easy way to control the space between the end of text and the start of an image.
is there a better way ?
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
Empty elements should not be used for layout - they should not be used at all - it just adds meaningless bloat to your pages.

If you want to add space around an element, use margins. If you want to add space inside an element use padding.

In your case, instead of an empty DIV with a top margin of 15px, why not just add a margin to the main DIVs:

#container > div {
    float: left;
    margin: 0px 5px 15px;
    width: 230px;
}

Open in new window

0
 

Author Comment

by:isnoend2001
Comment Utility
Thanks ChrisStanyon
Gottacha
I am curious about your example:
#container > div {
Is the > symbol a typo or does it mean something ?
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
The > symbol means 'direct child of', so #container > div will only style DIVs that are direct children of #container, where as #container div will style all DIVs within #container.

Take the following HTML. Only #div1 is a direct child of #container

<div id="container">
     <div id="div1">
          <div id="div2">This is DIV2</div>
     </div>
</div>

Open in new window

#container > div { border: 1px solid red; } //only put a border around #div1
#container div { border: 1px solid red; } //put a border around #div1 and #div2

Hope that makes sense :)
0
 

Author Comment

by:isnoend2001
Comment Utility
Thanks, good to know
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
Your site has been shaping up.

As for ads, you can use google analytics and do A/B testing on the ads where you can randomly serve one version with 3 ads, one version with 2 ads.  You can also test with the type(size) of the ads, color etc.    At least from my experience, it takes roughly 5K to 10K unique AND engaged monthly visitors per $100.  That 5K to 10K uniques would be about 15K to 20K page views.  

To make your life easier for future, use include files for each section of your site.  For instance, your site has 5 main sections.  The header,left column, right column, footer and main body.  You can have includes inside of includes.  The key is if you need to make a change to your header for instance, you can update one file and not have to update all.

<div header>
    <!--#include virtual="/header.asp"-->
<div>
<div main container>
    
     <div left col>
       <!--#include virtual="/leftcol.asp"-->
     </div>
     <div main>
           <p>This will be unique to each page</P>
      </div>
      </div right col>
        <!--#include virtual="/right.asp"-->
      </div>

</div> 
<div footer>
   <!--#include virtual="/footer.asp"-->
</div>

Open in new window

0
 

Author Comment

by:isnoend2001
Comment Utility
Thanks Padas
did not know that about Analytics when i get this site done I will try that.
As far as include files go I use a ton:
The page you helped me with had these:
<!-- #include virtual = "Includes_ASP/Analytics.asp" -->
<!-- #include virtual = "GoogleAds/Banner468x60.asp"-->
<!-- #include virtual ="/Menus/roofestimatingmenu.asp" -->
<!-- #include virtual ="/Menus/howtomenu.asp" -->
<!-- #include virtual ="/Menus/Poproofmaterialsmenu.asp" -->
<!-- #include virtual = "GoogleAds/verticalBanner120x240.asp"-->
<!-- #include virtual ="/Menus/RoofCalcWriterRightMenu.asp"-->
<!-- #include virtual = "GoogleAds/SkyScrappe120x600.asp"-->
<!-- #include virtual ="/Includes_ASP/footer.asp" -->
As far as an include file for the header that will have to wait.
Just noticed that my support page that uses JMail is not working
I may switch to aspmail.seems their is always something to slow me down, glad you guys are there or here to help
Thanks
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
For email, you can use cdo for examples http://www.paulsadowski.com/wsh/cdo.htm
0
 

Author Comment

by:isnoend2001
Comment Utility
Thanks, just put a trouble ticket to my host to make sure the jmail component is working properly as the software i sell also uses it to send error messages if any
0
 

Author Comment

by:isnoend2001
Comment Utility
hello padas couple emails i received since my last post:
My host:
Hello,
We suggest you to use asp cdosys for sending mail via web-form. Here is the example code of cdosys :-

Google:
Hi,
We've noticed that you're running less than three ad units on 53 of your pages on roofgenius.com. By taking advantage of all three available units per page, you could place at least 96 additional ad units on the pages we reviewed.



Additional pages where these suggestions may apply are:
1.roofgenius.com/product.as...      6.roofgenius.com/roof-nail-...
2.roofgenius.com/download.a...      7.roofgenius.com/faq.asp...
3.roofgenius.com/classy-wri...      8.roofgenius.com/roofcalcwr...
4.roofgenius.com/moreanglef...      9.roofgenius.com/links.htm...
5.roofgenius.com/videos/roo...      10.roofgenius.com/findroofle..
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
I would start a new thread for more in depth questions not related to this.

But quickly, I gave you a link I use as a resource for cdo For email http://www.paulsadowski.com/wsh/cdo.htm.  How you use it specifically in your case will be another question as I said.

Ads: That is just a suggestion, they are not actually viewing your site.  This can be another longer discussion.  
1) You should be testing pages with different layouts as I suggested

2) Your selling a product.  My personal feeling is your site looks spammy with all of the ads.  Many times site selling a product with unrelated ads look spammy and thus may not get the same percentage of people actually buying the product.  You should test by doing A/B splits if people coming to your site buy more/less/the same with or without the ads.  Or for a low tech way, just take the ads out for 2 to 4 weeks and see if you notice an increase in the amount of sales.

3) Unless  your ads are bringing in at least the minimum $100/month, I would rethink having them.  

4) In testing your ads, you should be able to use your adsense account to see which ads get the best response.  

Another suggestion: Are you going to turn your product into a web app?
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now