Help with floating divs

Hi All,
I have given up on the liquid template and now started from scratch with fixed divs.
My problem now is the floating elements.
I adapted this layout to a adobe tutorial with less divs so the floats and clears that the tutorial said some dont work.
Could someone look at my template and check the floating so as it sits like it does and wont move with content added.
I want to add a horizontal spry navigation bar at the bottom like the top but when i add another div it moves eveything and i get an error about 3px line gaps.
If I am not making sense please let me know
Any help would be appreciated.
Thanks in advance
This is my code and css.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<style type="text/css">
</style>
<script src="file:///C|/Users/Nikki/Desktop/tmp/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="file:///C|/Users/Nikki/Desktop/tmp/Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="file:///C|/Users/Nikki/Desktop/tmp/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="file:///C|/Users/Nikki/Desktop/tmp/SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../faarcss.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body,td,th {
    font-family: "Myriad Pro";
h1,h2,h3,h4,h5,h6 {
    font-family: "Myriad Pro";
    font-weight: bold;
h1 {
    font-size: 110%;
h2 {
    font-size: 105%;
h3 {
    font-size: 100%;
h4 {
    font-size: 90%;
h5 {
    font-size: 90%;
h6 {
    font-size: 90%;
p  {font-size: 90%;
</style>
</head>
<body onload="KW_doClock()">
<div id="wrapper">
  <div id="topNav">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">Home</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">Finance</a>
        <ul>
          <li><a href="#">Finance Overview</a></li>
          <li><a href="#">More than Just a Mortgage</a></li>
          <li><a href="#">Line Of Credit</a></li>
          <li><a href="#">The Latte Factor</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Insurance</a>
        <ul>
          <li><a href="#">The Importance of Insurance</a></li>
          <li><a href="#">Why do we need Insurance</a></li>
          <li><a href="#">Personal Insurance</a></li>
          <li><a href="#">Health Insurance</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Financial Planning</a>
        <ul>
          <li><a href="#">Creating your financial security</a></li>
          <li><a href="#">Superannuation</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Budgeting</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Taxation</a>
        <ul>
          <li><a href="#">Accounting</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Taxation</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Property</a>
        <ul>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Property Archives</a></li>
          <li><a href="#">Property F.A.Q.</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Legal</a>
        <ul>
          <li><a href="#">Estate Planning</a></li>
          <li><a href="#">Solicitors</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Information</a>
        <ul>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Seminars</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Media</a>
        <ul>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Media</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">About FAAR</a>
        <ul>
          <li><a href="#">Our Point of Difference</a></li>
          <li><a href="#">Our Undertaking</a></li>
          <li><a href="#">Feedback</a></li>
          <li><a href="#">Site map</a></li>
          <li><a href="#">Contact FAAR</a></li>
</ul>
      </li>
    </ul>
  </div>
  <div id="logo"><img src="file:///C|/Users/Nikki/Desktop/faar/images/FAAR.logo.jpg" alt="Logo" width="230" height="230" align="left" /></div>
  <div id="name">
  <img src="file:///C|/Users/Nikki/Desktop/faar.com.au/images/name2.jpg" width="300" height="230" alt="FAAR" /></div>
<div id="header">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="450" height="230" id="FlashID" title="Header">
  <param name="movie" value="file:///C|/Users/Nikki/Desktop/faar/newFlash.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="opaque" />
  <param name="swfversion" value="6.0.65.0" />
  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
  <param name="expressinstall" value="file:///C|/Users/Nikki/Desktop/tmp/Scripts/expressInstall.swf" />
  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="file:///C|/Users/Nikki/Desktop/faar/newFlash.swf" width="450" height="230">
    <!--<![endif]-->
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="6.0.65.0" />
    <param name="expressinstall" value="file:///C|/Users/Nikki/Desktop/tmp/Scripts/expressInstall.swf" />
    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    <div>
      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
    </div>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object></div>
<div id="motto">It makes sense to hire an expert - and even more sense to learn from them!</div>
  <div id="clock">
    <script language='JavaScript'>
// Kaosweaver Live Clock Start
function class_clock(f,s,c,b,w,h,d,m,g,z) { // Copyright 2002 by Kaosweaver, All rights reserved
    this.b=b;this.w=w;this.h=h;this.d=d;this.g=g;this.z=z
    this.o='<font style="color:'+c+'; font-family:'+f+'; font-size:'+s+'pt;">';
if (m==1) this.o+=doDate("W0",",%20","D1","%20","M0",",%20","Y0",",%20");
var clock=new class_clock("Arial, Helvetica, sans-serif","10","#000000","#FFFFFF","287",1,1,1,0,0)
// If the clock's size needs adjusting, change the 287 above.
d=document
if (d.all || d.getElementById) {d.write('<span id="activeClock" style="width:'+clock.w+'px; background-color:'+clock.b+'"></span>'); }
else if (d.layers) {d.write('<ilayer bgcolor="'+clock.b+'" id="wrapClock"><layer width="'+clock.w+'" id="activeClock"></layer></ilayer>'); }
else {KW_doClock(1);}
function KW_doClock(a) { // Copyright 2003 by Kaosweaver, All rights reserved
    d=document;t=new Date();p="";dClock="";    if (d.layers) d.wrapClock.visibility="show";
    tD=(t.getTimezoneOffset()-(clock.z*60))*clock.g;t.setMinutes(tD+t.getMinutes())
    h=t.getHours();m=t.getMinutes();s=t.getSeconds();if (clock.h)
     {p=(h>11)?"PM":"AM";h=(h>12)?h-12:h;h=(h==0)?12:h;}if (clock.d)
     {m=(m<=9)?"0"+m:m; s=(s<=9)?"0"+s:s;} dClock = clock.o+h+':'+m+':'+s+' '+p+'</font>';
    if (a) {d.write(dClock);}if (d.layers) {wc = document.wrapClock;lc = wc.document.activeClock;
        lc.document.write(dClock);lc.document.close();
    } else if (d.all) {    activeClock.innerHTML = dClock;
    } else if (d.getElementById) {d.getElementById("activeClock").innerHTML = dClock;}
    if (!a) setTimeout("KW_doClock()",1000);
function doDate(){ // Copyright 2002 by Kaosweaver, All rights reserved.
  var t=new Date(),a=doDate.arguments,str="",i,a1,lang="1";
  var month=new Array('January','Jan', 'February','Feb', 'March','Mar', 'April','Apr', 'May','May', 'June','Jun', 'July','Jul', 'August','Aug', 'September','Sep', 'October','Oct', 'November','Nov', 'December','Dec');
  var tday= new Array('Sunday','Sun','Monday','Mon', 'Tuesday','Tue', 'Wednesday','Wed','Thursday','Thr','Friday','Fri','Saturday','Sat');
  for(i=0;i<a.length;i++) {a1=a[i].charAt(1);switch (a[i].charAt(0)) {
  case "M":if  ((Number(a1)==3) && ((t.getMonth()+1)<10)) str+="0";
  str+=(Number(a1)>1)?t.getMonth()+1:month[t.getMonth()*2+Number(a1)];break;
  case "D": if ((Number(a1)==1) && (t.getDate()<10)) str+="0";str+=t.getDate();break;
  case "Y": str+=(a1=='0')?t.getFullYear():t.getFullYear().toString().substring(2);break;
  case "W":str+=tday[t.getDay()*2+Number(a1)];break; default: str+=unescape(a[i]);}}return str;
// Kaosweaver Live Clock End
    </script>
    <!-- KW Live Clock -->
  </div>
  <!-- TemplateBeginEditable name="mainContent" -->
  <div id="mainContent">
    <p><strong>Template for Financial &amp; Accounting</strong></p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
  </div>
  <!-- TemplateEndEditable -->
  <div id="sidebar">
    <ul id="MenuBar2" class="MenuBarVertical">
      <li class="navMenu"><a href="#">Home</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Finance</a>
        <ul>
          <li><a href="#">Finance Overview</a></li>
          <li><a href="#">More Thank Just a Mortgage</a></li>
          <li><a href="#">Line of Credit</a></li>
          <li><a href="#">The Latte Factor</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
      <li class="navMenu"><a href="#" class="MenuBarItemSubmenu">Insurance</a>
        <ul>
          <li><a href="#">Importance of Insurance</a></li>
          <li><a href="#">Why do we need Insurance</a></li>
          <li><a href="#">Personal Insurance</a></li>
          <li><a href="#">Health Insurance</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
<li><a href="#" class="MenuBarItemSubmenu">Financial Planning</a>
  <ul>
    <li><a href="#">Creating your financial security</a></li>
    <li><a href="#">Superannuation</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Budgeting</a></li>
  </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Taxation</a>
  <ul>
    <li><a href="#">Accounting</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
  </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Property</a>
  <ul>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Property Archives</a></li>
    <li><a href="#">Property F.A.Q.</a></li>
  </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Legal</a>
  <ul>
    <li><a href="#">Solicitors</a></li>
    <li><a href="#">Estate Planning</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
  </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Information</a>
  <ul>
    <li><a href="#">Seminars</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
  </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Media</a>
  <ul>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
  </ul>
</li>
<li><a href="#">Site Map</a></li>
<li><a href="#" class="MenuBarItemSubmenu">About Faar</a>
  <ul>
    <li><a href="#">Our Point of Difference</a></li>
    <li><a href="#">Our Undertaking</a></li>
    <li><a href="#">Site map</a></li>
    <li><a href="#">Feedback</a></li>
    <li><a href="#">CONTACT FAAR</a></li>
  </ul>
</li>
<li><a href="#">Feedback</a></li>
<li><a href="#">CONTACT FAAR</a></li>
    </ul>
</div>
  <div id="footer">
  <p class="copyright">Copyright &copy; Financial And Accounting Resources  2011   
<p class="disclaimer">Disclaimer: Due to the financial industry continually evolving and   changing every effort has been made to ensure the accuracy of the   information contained within ths website. Financial and Accounting   Resources accepts no responsibility or liability for any loss or damage   whatsoever (either directly or indirectly) to any person arising from   the use or reliance on the information contained in this website.  
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"/www/tmp/SpryAssets/SpryMenuBarRightHover.gif"});
swfobject.registerObject("FlashID");
</script>
</body>
</html>
CSS.
@charset "utf-8";
/* CSS Document */
body {
    background-color: #FFF;
    padding: 0px;
    margin-top: 25px;
    text-align: center;
    background-image: url(images/watermark.jpg);
    background-repeat: repeat-y;
    background-position: center;
html, body {
    margin: 0px;
    padding: 0px;
#wrapper {
    background-color: #FFF;
    width: 1000px;
    text-align: left;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    position: relative;
#topNav {
    background-color: #00A0C4;
    width: 1000px;
    padding-top: -25px;
    clear: left;
    float: left;
    padding-bottom: 5px;
#logo {
    background-color: #FFF;
    height: 230px;
    width: 230px;
    float: left;
    padding-top: 10px;
#name {
    background-color: #FFF;
    height: 230px;
    width: 300px;
    float: left;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 10px;
#header {
    background-color: #FFF;
    height: 230px;
    width: 450px;
    float: right;
    clear: right;
    padding-top: 10px;
#motto {
    background-color: #FFF;
    height: 25px;
    width: 1000px;
    float: left;
    text-align: center;
    color: #000;
    font-weight: bold;
    font-size: 110%;
    font-style: italic;
    padding-top: 15px;
#clock {
    background-color: #FFF;
    height: 30px;
    width: 1000px;
    clear: both;
    float: left;
    font-size: 100%;
    text-align: right;
    font-weight: normal;
    color: #000;
    vertical-align: middle;
    padding-top: 10px;
#mainContent {
    background-color: #FFF;
    height: auto;
    width: 720px;
    float: right;
    margin-bottom: 10px;
    padding-right: 25px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-image: url(images/watermark.jpg);
    background-repeat: repeat-y;
    background-position: center;
    background-attachment: fixed;
    text-align: justify;
#sidebar {
    background-color: #00A0C4;
    width: 225px;
    clear: left;
    float: left;
    height: auto;
    padding: 10px;
ul nav {
    background-color: #00A0C4;
    width: 250px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    list-style-position: inside;
    list-style-type: none;
#footer {
    background-color: #00A0C4;
    height: 100px;
    width: 940px;
    float: left;
    clear: left;
    padding: 10px;
body,td,th {
    font-family: Arial, Helvetica, sans-serif;
sidebar.menu {
    font-size: 100%;
    font-weight: bold;
    color: #FFF;
ul.nav {
    list-style: none; /* this removes the list marker */
    border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
    margin-bottom: 15px; /* this creates the space between the navigation on the content below */
ul.nav li {
    border-bottom: 1px solid #666; /* this creates the button separation */
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
    display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 160px;  /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
    text-decoration: none;
    background: #C6D580;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
    background: #ADB96E;
    color: #FFF;
    float: left;
.navMenu {
    font-size: 100%;
    text-align: left;
    padding-right: -10px;
    color: #FFF;
    font-weight: bold;
.sideNav {
    font-size: 80%;
    text-align: left;
    padding: 10px;
.copyright {
    font-family: "Myriad Pro";
    font-size: 110%;
    font-weight: bold;
    color: #FFF;
    text-align: center;
.disclaimer {
    font-size: 75%;
    color: #FFF;
    text-align: left;
Thank you
muznik

The table is still above the text, not on the side like in the image you sent.
I have the test document in a folder called "Test" in that folder i have a folder named "CSS" where the text document is saved as style.css
The code i have now is below... Not sure what I'm doing wrong :/
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<head>
<title>style.css</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="masthead">
    <div id="logo">
    </div>
    <div id="header">
    </div>
</div>
<div id="container">
    <div id="left_col">
      <table width="188" border="1">
      <tr>
        <td>Test 1 </td>
      </tr>
      <tr>
        <td>Test 2 </td>
      </tr>
      <tr>
        <td>Test 3 </td>
      </tr>
      <tr>
        <td>Test 4 </td>
      </tr>
    </table>
    </div>
  <div id="page_content" style="overflow: auto;">
      <p>The Department of the Navy desires a tool for analyzing  the affects of budgetary changes upon Fire and Emergency Services provided upon  Naval Installations throughout the world.   The diversity of these installations suggests that across the board  funding changes may affect each location differently.  This project presents a Fire Loss Model to  support the continued development of the analysis tool.</p>
    </div>
</div>
<div id="footer"></div>
</body>
</html>

Similar Messages

  • Need help with floating div's and clear property

    Link to page
    Link to CSS file
    I have the website currently setup as a 3 column website and everything is working fine.  I need to make some pages as a 2 column page with the left column having several "leftcolumn" div's stacked on top of each other so that there are several rounded box sections in the left column.
    I have the leftcolumn div floated left with a clear left to get the left column div's to stack on top of each other.
    The rightcolumn is floated right.
    How do I get my right column to align with the top of the first leftcolumn div?

    It's not always necessary to float every column.  One float is usually enough for a 2-column layout.
    Where you have this:
    #rightcolumn {
        width: 620px;
        float: right;
        color: #FFFFFF;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #FFFFFF;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        padding: 10px;
        border:3px solid #5f605f;
        -moz-border-radius:20px;
        -webkit-border-radius:20px;
        -opera-border-radius:20px;
        -khtml-border-radius:20px;
        border-radius:20px;
        background-color: #858586;
        font-size: 12px;
        margin: 10px;
    Change it as follows:
    #rightcolumn {
    /**REMOVE ALL THIS**/
        width: 620px; 
        float: right;
        color: #FFFFFF;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #FFFFFF;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        padding: 10px;
        border:3px solid #5f605f;
        -moz-border-radius:20px;
        -webkit-border-radius:20px;
        -opera-border-radius:20px;
        -khtml-border-radius:20px;
        border-radius:20px;
        background-color: #858586;
        font-size: 12px;
    /**REMOVE THIS**/
        margin: 10px;
    /**ADD THIS**/
        margin-left: 350px;  /**adjust as needed**/
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb
    Message was edited by: Nancy O.
    Strikethroughs are not working in the forum.  I edited the code to make more sense.

  • Need help with overlapping divs!

    Hey everyone,
    I'm working on another website and I have come up against a common problem for newbie designers from what I hear, the dreaded overlapping div problem!  I have a 2 column fixed layout with a floating left div.  My left div has my nav bar and various images.  When my main content div has more content than the left floating div, the left div border does not reach the footer!  Until now, I have gotten by with just hitting return in my left column div until it reaches the footer.  I am sure it is not the right way to do it but it has worked so far.  The problem is, now one of the pages has the left column div overlapping onto the footer!  I did some reading and I am guessing it involves either the box properties or clear float which I am not too familiar with.
    Any advice would be stellar!  I know this is just another stumbling block to get over but I would feel so much better if I was doing it the right way. 
    Here are screens of my issue,
    And here is my code for the page in question.
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="http://www.xldesignsonline.com/fchi/favicon.ico">
    <title>Full Circle Home Inspections</title>
    <link href="_css/main.css" rel="stylesheet" type="text/css" /><!--[if IE 5]>
    <style type="text/css">
    /* place css box model fixes for IE 5* in this conditional comment */
    .twoColFixLtHdr #sidebar1 { width: 230px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css">
    /* place css fixes for all versions of IE in this conditional comment */
    .twoColFixLtHdr #sidebar1 { padding-top: 30px; }
    .twoColFixLtHdr #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]-->
    <style type="text/css">
    <!--
    body {
         background-color: #FFF;
    .paragraphLead {
         font-size: 110%;
         font-weight: bold;
    a:link {
         text-decoration: none;
         color: #CF0;
    a:visited {
         text-decoration: none;
    a:hover {
         text-decoration: none;
    a:active {
         text-decoration: none;
    #apDiv1 {
         position:absolute;
         width:236px;
         height:157px;
         z-index:1;
         left: 692px;
         top: 372px;
    #apDiv2 {
         position:absolute;
         width:200px;
         height:192px;
         z-index:2;
         left: 697px;
         top: 1443px;
    #apDiv3 {
         position:absolute;
         width:158px;
         height:204px;
         z-index:2;
         left: 643px;
         top: 1502px;
    -->
    </style>
    <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
    </head>
    <body class="twoColFixLtHdr">
    <div id="container">
      <div id="header">
        <h1><!-- end #header -->
      </h1></div>
      <div id="sidebar1">
        <h3 align="center">
          <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" height="620">
            <param name="movie" value="_assets/menu.swf" />
            <param name="quality" value="high" />
            <param name="wmode" value="opaque" />
            <param name="swfversion" value="6.0.65.0" />
            <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
            <param name="expressinstall" value="Scripts/expressInstall.swf" />
            <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="_assets/menu.swf" width="200" height="620">
              <!--<![endif]-->
              <param name="quality" value="high" />
              <param name="wmode" value="opaque" />
              <param name="swfversion" value="6.0.65.0" />
              <param name="expressinstall" value="Scripts/expressInstall.swf" />
              <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
              <div>
                <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
                <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
              </div>
              <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
          </object>
        </h3>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"><a href="http://www.nachi.org/"><img src="_images/interNACHI.png" alt="InterNACHI" width="190" height="164" border="0" /></a></p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"><a href="http://www.nachi.org/education.htm"><img src="_images/education-seal-small.gif" alt="education seal" width="150" height="150" border="0" /></a></p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"><a href="http://www.iac2.org/"><img src="_images/iac2-all.gif" width="174" height="126" alt="IAC" /></a></p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"><a href="http://www.inspectopia.com/profile.b.507.r.16181.u.03bcfb.html"><img src="_images/logo_top.png" alt="Inspectopedia" width="190" height="45" border="0" /></a></p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"><a href="http://www.energystar.gov/"><img src="_images/img_energy_star_partner.jpg" width="160" height="191" alt="Energy Star Partner" /></a></p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"><a href="http://cjenterprises.myshaklee.com/us/en/welcome.html#"><img src="_images/Shaklee.gif" alt="Shaklee" width="119" height="160" border="0" /></a></p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"><a href="http://activerain.com/"><img src="_images/ARLogoSmall.gif" alt="Active Rain" width="135" height="36" border="0" /></a></p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"><a href="http://www.insiderpages.com/b/15246780294"><img src="_images/insider_pages.gif" alt="Insider Pages" width="89" height="37" border="0" /></a></p>
    <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
      </div>
      <div id="mainContent">
        <h2>Radon Gas Inspection</h2>
        <div id="paragraphFloat">
          <h5>What Is Radon?</h5>
          <p> Radon is a cancer causing radioactive gas. You cannot see, smell or taste radon, but it may be a problem in your home. The Surgeon General has warned that radon is the second leading cause of lung cancer in the United States today. </p>
          <div id="apDiv1">
        <div align="center"><a href="http://www.epa.gov/radon/video/epa-epu.wmv"><img src="_images/psa_revised.jpg" alt="What Is Radon?" width="200" height="172" border="0" /></a></div></div></div>
        <p>If you smoke and your home has high radon levels, you're at high risk for developing lung cancer. Some scientific studies of radon exposure indicate that children may be more sensitive to radon. This may be due to their higher respiration rate and their rapidly dividing cells, which may be more vulnerable to radiation damage. </p>
    <p> </p>
        <h5>Why Is It Dangerous?</h5>
    <p> The U.S. Environmental Protection Agency (US EPA) and the Surgeon General's Office have estimated that as many as 20,000 lung cancer deaths are caused each year by radon. Radon is the second leading cause of lung cancer. Radon-induced lung cancer costs the United States over $2 billion dollars per year in both direct and indirect health care costs.</p>
    <p>According to the US EPA, nearly 1 in 3 homes checked in seven states and on three Indian lands had screening levels over 4 pCi/L, the EPA's recommended action level for radon exposure.</p>
    <p>The alpha radiation emitted by radon is the same alpha radiation emitted by other alpha generating radiation sources such as plutonium.</p>
    <p>A family whose home has radon levels of 4 pCi/l is exposed to approximately 35 times as much radiation as the Nuclear Regulatory Commission would allow if that family was standing next to the fence of a radioactive waste site. (25 mrem limit, 800 mrem exposure)</p>
    <p> At the 4 pCi/l EPA action guideline level, radon carries approximately 1000 times the risk of death as any other EPA carcinogen. It is important to note that the action level is not a safe level, as there are no &quot;safe&quot; levels of radon gas.</p>
    <p> </p>
    <h5>How Does It Get Into My Home?</h5>
    <p> Radon is a radioactive gas. It comes from the natural decay of uranium that is found in nearly all soils. It typically moves up through the ground to the air above and into your home through cracks and other holes in the foundation. Your home traps radon inside, where it can build up. Any home may have a radon problem. This means new and old homes, well-sealed and drafty homes, and homes with or without basements.</p>
    <p> Radon from soil gas is the main cause of radon problems. Sometimes radon enters the home through well water. In a small number of homes, the building materials can give off radon, too. However, building materials rarely cause radon problems by themselves.</p>
    <p><strong>Radon gets in through:</strong></p>
    <ul>
      <li>Cracks in solid floors
        <div id="apDiv3">
          <div align="center"><a href="http://www.fullcirclehomeinspections.com/_assets/CitizensGuideRadon.pdf"><img src="_images/citguidecoverradon.jpg" alt="Guide To Radon" width="154" height="200" border="0" /></a></div>
        </div>
      </li>
      <li>Construction joints</li>
      <li>Cracks in walls</li>
      <li>Gaps in suspended floors</li>
      <li>Gaps around service pipes</li>
      <li>Cavities inside walls</li>
      <li>Surrounding water supply</li>
    </ul>
    <p> </p>
    <h5>What Can I Do?</h5>
    <p> Radon is a national environmental health problem. Elevated radon levels have been discovered in every state. The US EPA estimates that as many as 8 million homes throughout the country have elevated levels of radon. Current state surveys show that 1 home in 5 has elevated radon levels.</p>
    <p> Testing is the only way to know your home's radon levels. There are no immediate symptoms that will alert you to the presence of radon. It typically takes years of exposure before any problems surface. </p>
    <p>Let <strong>Full Circle Home Inspections</strong> ensure your family and your home are protected and safe from radon exposure!</p>
    <p> </p>
    <h5>Radon Myths</h5>
    <p><strong><em>MYTH:</em> Scientists are not sure that radon really is a problem.</strong></p>
    <blockquote>
      <p><strong><em>FACT:</em></strong> Although some scientists dispute the precise number of deaths due to radon, all the major health organizations (like the Centers for Disease Control and Prevention, the American Lung Association and the American Medical Association) agree with estimates that radon causes thousands of preventable lung cancer deaths every year. This is especially true among smokers, since the risk to smokers is much greater than to non-smokers.</p>
    </blockquote>
    <p><strong><em>MYTH:</em> Radon testing is difficult, time-consuming and expensive.</strong></p>
    <blockquote>
      <p><strong><em>FACT:</em></strong> Radon testing is easy. You can test your home yourself or hire a qualified radon test company. Either approach takes only a small amount of time and effort.</p>
    </blockquote>
    <p><strong><em>MYTH:</em> Homes with radon problems can't be fixed.</strong></p>
    <blockquote>
      <p><strong><em>FACT:</em></strong> There are simple solutions to radon problems in homes. Hundreds of thousands of homeowners have already fixed radon problems in their homes. Most homes can be fixed for about the same cost as other common home repairs; check with one or more qualified mitigators. Call your <a href="http://www.epa.gov/radon/whereyoulive.html">state radon office</a> for help in identifying qualified mitigation contractors.</p>
    </blockquote>
    <p><strong><em>MYTH:</em> Radon affects only certain kinds of homes.</strong></p>
    <blockquote>
      <p><strong><em>FACT: </em></strong>House construction can affect radon levels. However, radon can be a problem in homes of all types: old homes, new homes, drafty homes, insulated homes, homes with basements, and homes without basements. Local geology, construction materials, and how the home was built are among the factors that can affect radon levels in homes.</p>
    </blockquote>
    <p><strong><em>MYTH:</em> Radon is only a problem in certain parts of the country.</strong></p>
    <blockquote>
      <p><strong><em>FACT:</em></strong> High radon levels have been found in every state. Radon problems do vary from area to area, but the only way to know your radon level is to test.</p>
    </blockquote>
    <p><strong><em>MYTH:</em> A neighbor's test result is a good indication of whether your home has a problem.</strong></p>
    <blockquote>
      <p><strong><em>FACT:</em></strong> It's not. Radon levels can vary greatly from home to home. The only way to know if your home has a radon problem is to test it.</p>
    </blockquote>
    <p><strong><em>MYTH:</em> Everyone should test their water for radon.</strong></p>
    <blockquote>
      <p><strong><em>FACT:</em></strong> Although radon gets into some homes through water, it is important to first test the air in the home for radon. If your water comes from a public water supply that uses ground water, call your water supplier. If high radon levels are found and the home has a private well, call the Safe Drinking Water Hotline at 1-800-426-4791 for information on testing your water.</p>
    </blockquote>
    <p><strong><em>MYTH:</em> It's difficult to sell homes where radon problems have been discovered.</strong></p>
    <blockquote>
      <p><strong><em>FACT:</em></strong> Where radon problems have been fixed, home sales have not been blocked or frustrated. The added protection is some times a good selling point.</p>
    </blockquote>
    <p><strong><em>MYTH:</em> I've lived in my home for so long, it doesn't make sense to take action now.</strong></p>
    <blockquote>
      <p><strong><em>FACT: </em></strong>You will reduce your risk of lung cancer when you reduce radon levels, even if you've lived with a radon problem for a long time.</p>
    </blockquote>
    <p><strong><em>MYTH:</em> Short-term tests can't be used for making a decision about whether to fix your home.</strong></p>
    <blockquote>
      <p><strong><em>FACT:</em> </strong>A short-term test, followed by a second short-term test* can be used to decide whether to fix your home. However, the closer the average of your two short-term tests is to 4 pCi/L, the less certain you can be about whether your year-round average is above or below that level. Keep in mind that radon levels below 4 pCi/L still pose some risk. Radon levels can be reduced in most homes to 2 pCi/L or below.</p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p align="center"><img src="_images/CA-3.jpg" width="520" height="207" /></p>
    </blockquote>
      </div>
      <div id="footer">
        <p align="center"><strong>© 2009 XL Designs Online - All Rights Reserved </strong></p>
      </div>
    <!-- end #container --></div>
    <script type="text/javascript">
    <!--
    swfobject.registerObject("FlashID");
    //-->
    </script>
    </body>
    </html>
    And here is my CSS if needed,
    @charset "utf-8";
    body  {
         font: 100% Verdana, Arial, Helvetica, sans-serif;
         background: #666666;
         margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
         padding: 0;
         text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
         color: #000000;
    .twoColFixLtHdr #container {
         width: 950px; /* the auto margins (in conjunction with a width) center the page */
         border: 1px solid #000000;
         text-align: left; /* this overrides the text-align: center on the body element. */
         margin-top: 20px;
         margin-right: auto;
         margin-bottom: 20px;
         margin-left: auto;
         background-color: #557050;
    .twoColFixLtHdr #header {
         border-bottom: 1px solid #000000;
         height: 250px;
         background-color: #DDDDDD;
         padding-top: 0;
         padding-right: 10px;
         padding-bottom: 0;
         padding-left: 20px;
         background-image: url(../_images/homebanner1.png);
    .twoColFixLtHdr #header h1 {
         margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
         padding: 20px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
         text-align: center;
         font-size: 48px;
         font-family: Tahoma, Geneva, sans-serif;
         color: #000;
    .twoColFixLtHdr #sidebar1 {
         float: left; /* since this element is floated, a width must be given */
         width: 200px;
         border-right: 1px solid #000000;
         background-color: #557050;
         padding-top: 0px;
         padding-right: 10px;
         padding-bottom: 15px;
         padding-left: 10px;
    .twoColFixLtHdr #mainContent {
         margin-top: 0;
         margin-right: 0;
         margin-bottom: 0;
         margin-left: 250px;
         padding-top: 0;
         padding-right: 20px;
         padding-bottom: 0;
         padding-left: 20px;
         text-align: left;
    .twoColFixLtHdr #mainContent h1 {
         font-size: 48px;
         font-family: "Arial Rounded MT Bold";
         font-weight: bold;
    .twoColFixLtHdr #mainContent h2 {
         font-family: "Arial Rounded MT Bold";
         font-size: 32px;
    .twoColFixLtHdr #mainContent h3 {
         font-family: Georgia, "Times New Roman", Times, serif;
         font-style: italic;
         color: #CF0;
         font-size: 125%;
    .twoColFixLtHdr #mainContent h5 {
         font-size: 120%;
    .twoColFixLtHdr #footer {
         padding: 20px 10px 20px 20px;
         border-top: 1px solid #000000;
         background-color: #A3A3A3;
         font-family: Arial, Helvetica, sans-serif;
    .twoColFixLtHdr #footer p {
         margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
         padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
         float: right;
         margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page */
         float: left;
         margin-right: 8px;
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
         clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    #paragraphFloat {
         width: 350px;
    #paragraphFloat2 {
         width: 350px;
    Please if anyone knows what I'm doing wrong please please let me know!  Since I am learning, I really want to get main concepts like this down so I am not constantly doing things the hard way!  Thank you! 
    Jayson

    1) Regarding validation, what does it do?
    It validates by telling you where your code isn't er... valid.  Sometimes the results are a bit jumbled but if you work through them one at a time and revalidate, it's a good way to learn.  If you fix all of the errors shown up through the validator you should end up with standards compliant code.  Not necessarily the best, most efficient code you can write but at least it will be valid and it helps you spot errors that hours of code-staring never seems to find.
    I don't use the DW validation tool because I find the W3c one easier.
    The W3c validator has a check box of HTML Tidy which can tidy up your code but it's not always as easy to see what changes.
    2) I know the <p> tag for spacing is wrong, I could just feel it in my bones.  I just didn't know what else to do.  If I <br> all the way down won't the code be just as cluttered?
    You're obviously a born web coder!
    <br> will bloat your page if you use them to position elements.
    Here you need to get used to a) the Block Model and b) CSS positioning.  Once you crack these, CSS opens up for you and becomes a little more intuitive.
    if you have two elements on top of each other rather than push them apart with other elements you do it with padding and/or margin.  There are things to watch out for here namely, collapsing margins but if you start to read up on the above, you'll get it.
    I just thought of something.  If I add a div in main content, align it to the bottom center with CSS, use a line break between it and the text above, and add the image in question in the new div, will the spacing between the text and image work itself out?  I just really want to get out of the <p> bad habit.
    Keep thinking!  Web design is not like desktop publishing or print.  Elements on a HTML page don't behave like paragraphs on a page.  Once you begin to figure out why not it all gets a little easier.
    If you want an image at the bottom an element you put that at the end of the content in that element.  Then you need to ensure there is no margin, padding or border between the img element and the next element (your footer).  HTML elements come with some styling that is applied by default in the browser.  Many web developers include a rule like this:
    body {
    margin: 0;
    padding:0;
    This sets the margin and padding to zero of course and it's purpose is to override the defaults.  Some people advocate applying similar rules to all elements and if your interested try googling Eric Meyer who has written about it online.
    One of the key purposes of CSS is to take styling out of the page.  It's leaner, more efficient for the viewer and the coder and helps with site management.
    3) AP divs are weird, and I did only use as a last resort.
    See? You're a natural!
    The reason is I am confused by the float and clear float classes.  My left column is floated left and that element is what I was having problems understanding.  I tried to make new divs and float right but I screwed it all up.  I am sure I am just not applying the clear float in the right places.
    Getting the hang of floating is key to CSS positioning.  You use a float if you want two elements to sit side by side on the page.  It disrupts the "document flow."  Ordinarily HTML elements are rendered one after the other, on top of each other.  Floating an element takes it out of the document flow and allows other elements to occupy its space.  When you float an element it should always have a width.  If the element below it also has a width, that width has to be sufficiently narrow to allow it to occupy the space.  In short, floated elements can't be wider than their containing element.
    The clear property is used after a float to stop an element occupying the space left by a floated element.  It works but confuses the heck out of me!
    So that leads me to my final point.  I am a novice too!  I might have fluffed a few of the technical points above but it's pretty much there.
    Regards
    Martin

  • Need Help With Dreamweaver Divs

    This is a clip of my website that I am making, it is not online yet.
    But what I need help is with the divs, as you can see the div with the blue text is overlapping a fireworks html banner I made.
    Any way I can fix this so that the fireworks banner goes over the div instead of the other way around?
    All help is thanked!

    This is a problem with stacking order.  Your Blue Text division has priority over your rollover-menus.
    Please read about z-index.
    http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
    For better answers, we need a link to your site's test page.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb

  • Help with two DIVs as columns at 100% page height

    I've got two DIVs side by side on my page and I want both columns to fill the page from top to bottom.
    The left DIV stops about half way down the page.
    There are DIVs inside of each column.
    My test link is: http://faceworks.webtestingsite.net/pages/facials.html
    Here's the CSS I used for the columns,
    #leftSideBkgd {
              position:absolute;
              min-height:100%;
              background-color: #f0f0f0;
              width: 25%;
              left: 0px;
              top: 0px;
              z-index: 0;
              background-image: url(../img/bkgd/leftMenu.jpg);
              background-repeat: repeat-y;
              background-position: 100% 0px;
    #rightSideBkgd {
              position: absolute;
              background-color: #FFFFFF;
              width: 75%;
              left: 25%;
              top: 0px;
              z-index: 0;
              min-height:100%;
              background-image: url(../img/bkgd/pageBkgd.jpg);
              background-repeat: repeat-x;
              background-position: 0px 0px;
    html {
              height:100%;
    body {
              height:100%;
              background-image: url(../img/bkgd/pageBkgd.jpg);
              background-repeat: repeat-x;
              margin-left: 0px;
              margin-top: 0px;
              margin-right: 0px;
              margin-bottom: 0px;
              background-color: #FFF;
              font-family: Tahoma, Geneva, sans-serif;
              font-size: 14px;
              font-style: normal;
              line-height: 1.75em;
              font-weight: normal;
              color: #000;
    Thanks for your help with this

    You cannot safely force the height on those divs, without also getting ugly vertical scrollbars.
    Your choices are three -
    1.  Use Faux columns (Google it) to make it *look* like the divs are the same height.
    2.  Use javascript to actually dynamically determine what height to use for the columns.
    3.  Use CSS3 to make the adjacent columns behave as if they were two adjacent cells in a table, resulting in them being the same height.
    My preference is #1 - it's easy and VERY effective.  I don't like #2 as a solution, and #3 works beautifully if you are not worried about supporting IE6 or 7.

  • Issues with floated DIV layout

    Hi I am having problems with my floated DIV layout on the following site in I.E 6/7 but not 8.
    I have tried display: inline thinking it may be a margin/padding issue?
    http://www.sopasbeauty.co.uk
    what am I doing wrong, should I be adding clearfloats to separate area's of the page??
    Mark

    First, open the page in DW and use FILE | Convert > XHTML 1.0 Transitional.  Then try changing this -
    <div class="boxes" id="box1">
          <h1>Acrylic Nails</h1>

  • Help with floating a Div tag?

    I am having difficulty properly floating a div tag in my site.  The page is http://www.planetwhistler.com/bandbs.html  The Div on the bottom of the second column with 'content for right_bandb_div' goes here will not properly float to the right of the Div to the left of it.  I have floated the 'right_bandb_' div to the left with enough of a margin to clear the div tag in the first column, I have also put the code for 'right_bandb' before the code for the div to the left of it but for some reason it won't properly place itself.  Thanks for any help provided.

    I realize my Template isn't exactly like yours, but you can learn from it.
    http://alt-web.com/TEMPLATES/CSS-centered-round-boxes.shtml
    1) apply min-height values to all your .boxes.
    2) add a float clearing between rows.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb

  • Help with floating table

    I'm helping my dad with a website and he wants the table sidebar i have to float down the page when the viewer scrolls. I know next to nothing about coding and could use some help updating it to be a floating table.

    The table is still above the text, not on the side like in the image you sent.
    I have the test document in a folder called "Test" in that folder i have a folder named "CSS" where the text document is saved as style.css
    The code i have now is below... Not sure what I'm doing wrong :/
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <head>
    <title>style.css</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link href="../css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="masthead">
        <div id="logo">
        </div>
        <div id="header">
        </div>
    </div>
    <div id="container">
        <div id="left_col">
          <table width="188" border="1">
          <tr>
            <td>Test 1 </td>
          </tr>
          <tr>
            <td>Test 2 </td>
          </tr>
          <tr>
            <td>Test 3 </td>
          </tr>
          <tr>
            <td>Test 4 </td>
          </tr>
        </table>
        </div>
      <div id="page_content" style="overflow: auto;">
          <p>The Department of the Navy desires a tool for analyzing  the affects of budgetary changes upon Fire and Emergency Services provided upon  Naval Installations throughout the world.   The diversity of these installations suggests that across the board  funding changes may affect each location differently.  This project presents a Fire Loss Model to  support the continued development of the analysis tool.</p>
        </div>
    </div>
    <div id="footer"></div>
    </body>
    </html>

  • Need a little help with placing divs?

    I am wanting to know How I can place three divs exactly like the picture shown. I am sure this is pretty easy for most of you so I am going to just leave this picture!
    Thanks for your help in advance!

    Like below ( although I would not specify height on the <divs> in a real situation UNLESS I knew the height of the content within them.)
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #wrapper {
        width: 400px;
        overflow: hidden;
        margin: 0 auto;
    #left, #right {
        float: left;
        width: 200px;
    #leftTop {
        background-color: #000;
        color: #fff;
        height: 100px;
    #leftBottom {
        background-color: #F00;
        color: #fff;
        height: 100px;
    #right {
        background-color:#03C;
        color: #fff;
        height: 200px;
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="left">
    <div id="leftTop">Div 1</div>
    <div id="leftBottom">Div 2</div>
    </div><!-- end left -->
    <div id="right">
    Div 3
    </div><!-- end right -->
    </div><!-- end wrapper -->
    </body>
    </html>

  • Help with this div - can I overlap divs?

    Hello there, I used the search function to find an answer to this, but got nothing concrete so thought I should make this thread
    My problem is shown in the screenshots below. I created a div id for the banner, a div id for the button "home". There is a Div ID for the stuff below, and that stuff is put into div classes
    My problem is, I want to put that home button over the gre banner (and other buttons). When I try shifting the button over the banner, instead of shifting over the banner, it shifts the banner away and just pushes it. The screen shot is below showing the before and after, as well as the css:
    [img]http://i1006.photobucket.com/albums/af186/RC20087765/Fig1designview.jpg?t=1292783483[/img]
    [img]http://i1006.photobucket.com/albums/af186/RC20087765/Fig1csscode.jpg?t=1292783852[/img]
    ^^ the css for that. The name of the button is "home" and it is a DIV ID
    This is what happens when I changes the margin left to 80pixes instead of 50 pixels (i.e. when i tried moving it to the right)
    [img]http://i1006.photobucket.com/albums/af186/RC20087765/fig2designview.jpg?t=1292783939[/img]
    All I want to do is place that home button on the grey banner! And later on, I will put some other buttons up there, but for now thats what I want to do
    If someone can just tell me how to put a div over another div, I would be so grateful! Thanks guys.

    Yes you can place one div over another div by using z-indexing (giving the <div> a stacking order). BUT, z-indexing only works with <div>s that have a declared position, like position:absolute (or relative). z-indexing and declared position have to be used together.
    From and old post:
    One more thing about positioning. z-indexing only works with elements that have a declare position like absolute or relative, and how that element reacts to a declare position will depend on whether or not it's parent element also has a declare position.
    So
    Code:
    #flash {
    z-index:5;
    will not work without ALSO giving it a declare position.
    But the actual display of #flash will very depending on whether or not it's parent container (<div>) also has a declared position.
    That is, if it's parent container DOES NOT also have a declared position, the child <div> will do 1 of 2 things.
    If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
    If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.
    So be sure to give a declared position to both the parent and the child <div>.
    Example page using declared positions and z-indexing to sandwich Flash between 2 layers of text:
    http://www.cidigitalmedia.com/tutorials/flash_div.html
    View the source code or copy it and practice by changing z-index and positions.
    Maybe this will help clear up any misunderstanding you have about declared positioning as well as the use of z-indexing:
    More info here:
    http://www.w3schools.com/css/pr_pos_z-index.asp
    Best of luck to ya!
    Adninjastrator

  • Help with dreamweaver div wrapper

    I am creating a web page using a div wrapper to contain all my div layout.
    What I want it to do is automatically adjust the layout if a browser size is changed. Right now the site remains fixed when a window size is changed. Is this because I am using divs and not tables?
    Any help and suggestions would be welcome.
    This is my code
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .wrapper {
    height: auto;
    width: 100%;
    margin: 0;
    #copyright {
    body,td,th {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #333;
    body {
    background-color: #343434;
    a {
    font-size: 12px;
    color: #CCC;
    h1 {
    font-size: 24px;
    color: #000;
    h2 {
    font-size: 18px;
    color: #940101;
    h3 {
    font-size: 16px;
    color: #333;
    h4 {
    font-size: 14px;
    color: #940101;
    #background {
    position:absolute;
    left:201px;
    top:31px;
    width:930px;
    height:772px;
    z-index:1;
    background-image: url(component%20images/background1.png);
    #apDiv1 {
    position:absolute;
    left:539px;
    top:34px;
    width:548px;
    height:791px;
    z-index:2;
    #apDiv2 {
    position:absolute;
    left:642px;
    top:227px;
    width:423px;
    height:47px;
    z-index:2;
    #apDiv3 {
    position:absolute;
    left:371px;
    top:377px;
    width:137px;
    height:35px;
    z-index:3;
    #apDiv4 {
    position:absolute;
    left:370px;
    top:436px;
    width:121px;
    height:31px;
    z-index:4;
    #apDiv5 {
    position:absolute;
    left:373px;
    top:490px;
    width:120px;
    height:41px;
    z-index:5;
    #apDiv6 {
    position:absolute;
    left:372px;
    top:554px;
    width:126px;
    height:36px;
    z-index:6;
    #copyright {
    position:absolute;
    left:798px;
    top:811px;
    width:335px;
    height:13px;
    z-index:7;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10px;
    color: #CCC;
    -->
    </style>
    </head>
    <body>
    <div id="wrapper" align="center">
    <div id="background"></div>
    <div id="apDiv2">
      <h2 align="right"><em>If you can dream it ... we can build it!</em></h2>
    </div>
    <div id="apDiv3">Home</div>
    <div id="apDiv4">Services</div>
    <div id="apDiv5">Portfolio</div>
    <div id="apDiv6">Contact</div>
    <div id="copyright">
      <div align="right">&copy; 2010 Center Line Construction &amp; Remodeling</div>
    </div>
      <p>  </p>
    <!-- end #wrapper --></div>
    </body>
    </html>
    Thanks

    You might want to play around with #apDiv2 ID, remove the code there first and see if that is what you are after.
    Also you might want to nest some divs make <div class="wrapper"><div class="content_wrapper">This is content wrapper</div></div>

  • Need help with hiding divs for different screen sizes with fluid layouts.

    Ok, so i've got a single page giving info that my website is coming soon and i've designed it for pc, tablet and mobile as i should.  I have hidden the divs i don't want from each view and when testing it, all works fine and as it should be but when it is on the server and live, it shows all the divs that are meant to be hidden on one screen?????   Is there something else i should be doing and can anyone help me here or is this a question for my host???
    Thanks for any help in advance

    Probably a coding issue.  Without a link, no way to help.
    Nancy O.

  • Need Help With Float Drop

    Hi,
    I'm working with a template with a fixed left sidebar and a
    liquid right main content area. I'm getting float drop with the
    main content area and I'm stumped as to how to fix it. I've never
    had this problem before with the same template. The temporary URL
    is www.allearsdogs.com. Any suggestions would be much appreciated!
    And Merry Christmas!
    Mychelle

    "Nikitadog31" <[email protected]> wrote in
    message
    news:gj0ta6$e6e$[email protected]..
    > Hi,
    > I'm working with a template with a fixed left sidebar
    and a liquid right
    > main
    > content area. I'm getting float drop with the main
    content area and I'm
    > stumped
    > as to how to fix it. I've never had this problem before
    with the same
    > template.
    > The temporary URL is www.allearsdogs.com. Any
    suggestions would be much
    > appreciated!
    Replace this:
    .twoColHybLtHdr #mainContent {
    float:left;
    margin:1px 10px 0px 2em;
    padding:10px 30px 10px 5px;
    width:70%;
    Witht his:
    .twoColHybLtHdr #mainContent {
    overflow:hidden;
    zoom:1;
    padding:10px 30px 10px 5px;
    The key is to keep things simple. No float, no width, no
    margin are needed
    here.
    overflow and zoom is all you need to make this layout behave
    the way you
    want.
    Thierry | Adobe Community Expert | Articles and Tutorials ::
    http://www.TJKDesign.com/go/?0
    Spry Widgets |
    http://labs.adobe.com/technologies/spry/samples/
    [click on
    "Widgets"]
    Spry Menu Bar samples |
    http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html

  • Can someone help with a div that pops up when you hover over a button?

    I made a div that pops up (stacked on the rest of the page) when you hover over a button (gigs). It works in the safari preview but when I test it online it doesn't. It's above the logo instead of blocking it and on the left site instead of the right. And when you open the page it isn't hidden like in the preview. Does someone know what is wrong?
    The test page: Stuff

    Below code, onclick of 'GIGS' shows pop-up window. You then have a 'close' button which when clicked closes it.
    <!DOCTYPE html>
    <!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!--> <html> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <title>Stuff</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="http://www.rockoco.be/stuff/css/main.css">
        <link rel="shortcut icon" href="favicon.ico">
        <link rel="apple-touch-icon" href="favicon.png">
        <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
    <script type="text/javascript">
    function MM_showHideLayers() { //v9.0
      var i,p,v,obj,args=MM_showHideLayers.arguments;
      for (i=0; i<(args.length-2); i+=3)
      with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
        if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
        obj.visibility=v; }
        </script>
    </head>
    <style>
    #popup {
        position: absolute;
        right: 0;
        z-index: 100;
    #popup img {
    display: block;
    #popup p {
    margin: 0;
    padding: 0;
    #popup a {
        text-decoration: none;
        display: inline-block;
        padding: 8px 12px;
        color: #fff;
        background-color: #000;
    </style>
    <body>
    <div id="popup">
    <img src="http://www.rockoco.be/stuff/img/Flyer-030315.png" alt="popup" width="426" height="605" class="png" />
    <p><a href="#" class="closeWindow">CLOSE</a></p>
    </div>
    <div id="content">
    <h1><img class="svg" src="http://www.rockoco.be/stuff/img/logo.svg" alt="Stuff" /></h1>
    <nav id="social">
        <ul>
       <li><a href="#"><img class="svg" src="http://www.rockoco.be/stuff/img/gigs.svg" alt="Gigs" /></a></li>
            <li><a href="https://twitter.com/36STUFF" target="_blank"><img class="svg" src="http://www.rockoco.be/stuff/img/twitter.svg" alt="Twitter" /></a></li>
            <li><a href="https://www.facebook.com/STUFF.isthebandname" target="_blank"><img class="svg" src="http://www.rockoco.be/stuff/img/facebook.svg" alt="Facebook" /></a></li>
            <li><a href="https://soundcloud.com/stuffmusic" target="_blank"><img class="svg" src="http://www.rockoco.be/stuff/img/soundcloud.svg" alt="Soundcloud" /></a></li>
            <li><a href="http://stuffmusic.bandcamp.com/" target="_blank"><img class="svg" src="http://www.rockoco.be/stuff/img/bandcamp.svg" alt="Bandcamp" /></a></li>
            <li><a href="https://www.youtube.com/user/duststuff/videos " target="_blank"><img class="svg" src="http://www.rockoco.be/stuff/img/youtube.svg" alt="Youtube" /></a></li>
            <li><a href="mailto:[email protected]"><img class="svg" src="http://www.rockoco.be/stuff/img/contact.svg" alt="Contact" /></a></li>
        </ul>
        <ul>
             <li><a href="[email protected]" target="_blank"><img class="svg" src="http://www.rockoco.be/stuff/img/remixes_@_ab_klein.svg" alt="Remixes" /></a></li>   
        </ul>
    </nav>
    </div>
    <footer>
        <a class="left" href="http://www.minguely.ch" target="_blank"><img src="http://www.rockoco.be/stuff/img/logo_minguely.png" alt="" /></a>
            <a class="right" href="http://www.martincramatte.com/" target="_blank"><img src="http://www.rockoco.be/stuff/img/logo_martincramatte.png" alt="" /></a>
    </footer>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    $(document).ready(function() {
    $('#popup').hide();
    $('.svg').click(function() {
    $('#popup').show()
    $(document).ready(function() {
    $('.closeWindow').click(function() {
    $('#popup').hide()
    </script>
    </body>
    </html>

  • Help with ap div

    Hi,
    can anyone help a newcomer to dreamweaver?
    Is it possible to add a hyperlink to an AP.Div ?
    I have inserted imaged into my ap divs and overlapped them to
    look how i want them, but i would like to be able to click on each
    image to go to another link. Anyone help me?? Please??

    function(){return A.apply(null,[this].concat($A(arguments)))}
                             Maybe I could write your code so it applies to just that section?
    You can target just the anchors by adding an "a" inside apDiv2 as follows:
    #apDiv2 a {
    text-decoration: none;

Maybe you are looking for

  • How do I save CS4 documents in CS5 without save as dialog?

    At my college, they have CS4 (master suite) and at home I've got CS5 (design premium). I can save files in CS5 as CS4 so they can be read at college (by Flash) but I have to do it via the "save as" every time I save. After a couple of times, it get r

  • I can't get updates to download!

    My iTunes has been bugging me to download the newest version for a while, but everytime I agree too, the page won't come up. I've tried to do it directly from the website, too. I've already tried refreshing, deleting cookies, disconnecting and reconn

  • Using Crystal Report for VS2010 with target Framework 4 Client Profile

    I´m need know if is possible use the Crystal Reports for VS 2010 with the framework 4 client Profile. Exists some posibility? I need use the WPF Crystal Report Viewer, and the export/print mechanism. Regards

  • Problems to differentiate between attachments and embedded in an email

    In my code i have something like that to verify if the attachment is embedded or not: public static bool IsEmbeddedAttachment(Outlook.Attachment attachment) //Anexos que não são embedded são obrigatóriamente olByValue, porém os embedded podem ser de

  • Content Repository vs Archive Link

    We are using a third party content repository to store SRM attachments. We configured this through OACT OAC0 transactions. We are able to send attachments and retrieve from this content management system fine. However, when the Content Repository is