Hi, I am trying to make sure all my uploaded images land on the right side of the content. I know this should be done with css but I am confused with all the div's, classes, and id's I'm already using.
Here's the code for the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<title>About Mountain Grove Cemetery</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="Mountain Grove Cemetery Association, Bridgeport, Fairfield County, Connecticut, P.T. Barnum, cemetery" />
<meta name="description" content="New England’s most scenic cemetery, Mountain Grove is beautifully landscaped with ornamental trees and picturesque lily pond. Closely associated with Connecticut families from Fairfield County, it is the final resting place of P.T. Barnum, Charles Stratton (Tom Thumb), Fanny Crosby, and Daniel Nash Morgan, former Treasurer of the United States." />
<link href="mgc.css" rel="stylesheet" type="text/css">
<!-- Add jQuery library -->
<script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link rel="stylesheet" href="/fancyBox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancyBox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/fancyBox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="/fancyBox/source/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" />
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" />
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancyBox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<style type="text/css">
<!-- Add fancyBox -->
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
$("#single_1").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
});
</script>
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header"><img src="images/mgc_header.gif" alt="header" width="900" height="151" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="-1,-39,895,148" href="index.php" alt="mountain grove cemetery home page" />
</map>
<!-- end #header --></div>
<div id="insidenavigation"><img src="../images/mgc_nav_about_history.gif" alt="inside navigation" width="900" height="56" border="0" usemap="#insidenavigation" />
<map name="insidenavigation" id="insidenavigation2">
<area shape="rect" coords="10,2,73,30" href="index.php" alt="mountain grove cemetery home page" />
<area shape="rect" coords="87,2,164,30" href="aboutDetail.php" alt="about mountain grove cemetery" />
<area shape="rect" coords="183,2,278,30" href="cremation_optionsDetail.php" alt="burial options" />
<area shape="rect" coords="303,2,481,30" href="read_chapelDetail.php" alt="read chapel" />
<area shape="rect" coords="510,2,665,30" href="interment_optionsDetail.php" alt="interment options" />
<area shape="rect" coords="761,2,889,30" href="bulletin_boardList.php" alt="bulletin board" />
<area shape="rect" coords="692,2,731,30" href="faqList.php" alt="Frequently Asked Questions" />
<area shape="rect" coords="12,36,141,63" href="aboutDetail.php" alt="burial options" />
<area shape="rect" coords="157,35,275,75" href="guide_mapDetail.php" alt="guidemap" />
<area shape="rect" coords="285,35,399,59" href="notablesDetail.php" alt="notables" />
<area shape="rect" coords="415,35,603,59" href="rrDetail.php" alt="rules and regulations" />
<area shape="rect" coords="769,35,884,64" href="contactDetail.php" alt="contact" />
<area shape="rect" coords="633,35,736,62" href="directionsDetail.php" alt="directions" />
</map>
</div>
<div id="mainContent">
<!-- STEP2: Display Records (Paste this where you want your records to be listed) -->
<h1><span style="font-size: 21px; font-family:'Times New Roman', Times, serif; text-align: left;">About Us: The History of Mountain Grove Cemetery</span></h1>
<?php echo $aboutRecord['content'] ?><br/>
<?php foreach ($aboutRecord['images'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<a class="fancybox" rel="group" title="" id="#single_1" href="<?php echo $upload['urlPath'];?>"><img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>"
title="<?php echo htmlencode($upload['info1']) ?>" alt="" /></a><br/>
<?php echo htmlencode($upload['info1']) ?>
<br/>
<br/>
<?php elseif ($upload['isImage']): ?>
<a class="fancybox" rel="group" title="" id="#single_1" href="<?php echo $upload['urlPath'];?>"><img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" title="<?php echo htmlencode($upload['info1']) ?>" alt="" />
<br/> </a><br/>
<?php echo htmlencode($upload['info1']) ?>
<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a><br/>
<?php endif ?>
<?php endforeach ?>
<?php if (!$aboutRecord): ?>
No record found!<br/><br/>
<?php endif ?>
<!-- STEP 2a: Display Uploads for field 'images' (Paste this anywhere inside STEP2 to display uploads) -->
<!-- Upload Fields: num, createdTime, tableName, fieldName, recordNum, preSaveTempId, filePath, filename, extension, thumbFilePath, isImage, hasThumbnail, urlPath, width, height, thumbUrlPath, thumbWidth, thumbHeight, info1, info2, info3, info4, info5 -->
<!-- /STEP2: Display Records -->
<!-- end #container --></div>
<div id="footer">
<img src="images/mgc_footer.gif" alt="footer" width="900" height="78" border="0" usemap="#Map2" />
<map name="Map2" id="Map2">
<area shape="rect" coords="413,43,489,67" href="" target="_blank" alt="webmaster" />
</map>
<!-- end #footer --></div></div>
</body>
</html>
And here's the url for the specific page I am talking about:
http://www.mtgrovecemetery.org/aboutDetail.php