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>

Similar Messages

  • 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 Dreamweaver centering website

    Help please,
    I have created my first website with Dreamweaver 8.02 and now
    I need to center it into the center of the page. But I do not know
    how. The web is 700wide x 500 high and the address is:
    www.amandastraussdesigns.com Please help. I don’t know how to
    fix this.
    Thanks

    Of course !!
    "Sleep deprived" maybe :)
    Nadia
    Adobe® Community Expert : Dreamweaver
    Tutorials |SEO |Templates
    http://www.DreamweaverResources.com
    http://www.perrelink.com.au
    CSS Tutorials for Dreamweaver
    http://www.adobe.com/devnet/dreamweaver/css.html
    "Murray *ACE*" <[email protected]> wrote
    in message
    news:[email protected]...
    >> body {
    >> text-align: left; /* I added this */
    > -----------------^^^
    >
    > Should be text-align:center;
    >
    > --
    > Murray --- ICQ 71997575
    > Adobe Community Expert
    > (If you *MUST* email me, don't LAUGH when you do so!)
    > ==================
    >
    http://www.dreamweavermx-templates.com
    - Template Triage!
    >
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    >
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    >
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    > ==================
    >
    >
    > ": Nadia : **AdobeCommunityExpert**"
    > <[email protected]> wrote
    in message
    > news:[email protected]...
    >> You'll need to get into code view to fix this....
    >>
    >> Change the the body style you have now to:
    >>
    >> body {
    >> text-align: left; /* I added this */
    >> margin-left: 0px;
    >> margin-top: 0px;
    >> margin-right: 0px;
    >> margin-bottom: 0px;
    >> }
    >>
    >> Add a new div style just underneath the body styles:
    >>
    >> #outwrapper{
    >> position: relative;
    >> margin: auto auto;
    >> width: 700px;
    >> text-align:left;
    >> }
    >>
    >> Then, just under this line:
    >>
    >> <body tracingsrc="image/colors.jpg"
    tracingopacity="11">
    >>
    >> add
    >>
    >> <div id="outwrapper">
    >>
    >> just before this line (right at the bottom of the
    code)
    >>
    >> </body>
    >>
    >> add this:
    >>
    >> </div> <!-- /wrapper div -->
    >>
    >> so your last 3 lines look like this:
    >>
    >> </div>
    >> </body>
    >> </html>
    >>
    >>
    >> Your page should now be centered horizontally.
    >>
    >> --
    >> Nadia
    >> Adobe® Community Expert : Dreamweaver
    >> -------------------------------------------------
    >> Tutorials |SEO |Templates
    >>
    http://www.DreamweaverResources.com
    >> -------------------------------------------------
    >>
    http://www.perrelink.com.au
    >> -------------------------------------------------
    >> CSS Tutorials for Dreamweaver
    >>
    http://www.adobe.com/devnet/dreamweaver/css.html
    >> -------------------------------------------------
    >>
    >>
    >>
    >> "demhs" <[email protected]> wrote
    in message
    >> news:[email protected]...
    >>>
    >>> Help please,
    >>>
    >>> I have created my first website with Dreamweaver
    8.02 and now I need to
    >>> center
    >>> it into the center of the page. But I do not
    know how. The web is
    >>> 700wide x 500
    >>> high and the address is:
    www.amandastraussdesigns.com Please help. I
    >>> don?t know
    >>> how to fix this.
    >>>
    >>> Thanks
    >>>
    >>>
    >>
    >>
    >
    >

  • 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>

  • 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

  • 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.

  • Help with Dreamweaver MX

    I have a problem with Dreamweaver MX "unexpectedly quitting,"
    every time I try to open the program. I am running Mac OS 10.2.8. I
    have the console crash log for the program which I'll paste below.
    quote:
    Command: Dreamweaver MX
    PID: 1201
    Exception: EXC_BAD_ACCESS (0x0001)
    Codes: KERN_PROTECTION_FAILURE (0x0002) at 0x00000004
    Thread 0 Crashed:
    #0 0x00a15b8c in 0xa15b8c
    #1 0x006d6770 in 0x6d6770
    #2 0x006d4b60 in 0x6d4b60
    #3 0x00216894 in 0x216894
    #4 0x00215ab0 in 0x215ab0
    #5 0x00a25b94 in 0xa25b94
    #6 0x00a25cec in 0xa25cec
    #7 0x00a29924 in 0xa29924
    #8 0x00a29750 in 0xa29750
    Thread 1:
    #0 0x90073ba8 in mach_msg_trap
    #1 0x90005ed0 in mach_msg
    #2 0xc0009190 in __ape_internal
    #3 0xc0000efc in __ape_agent
    #4 0x90020c28 in _pthread_body
    Thread 2:
    #0 0x90073ba8 in mach_msg_trap
    #1 0x90005ed0 in mach_msg
    #2 0x9022a720 in SwitchContexts
    #3 0x90224fc8 in YieldToThread
    #4 0x90243128 in SetThreadState
    #5 0x9026d948 in SetThreadStateEndCritical
    #6 0x009e7c28 in 0x9e7c28
    #7 0x009e68e4 in 0x9e68e4
    #8 0x009e67e0 in 0x9e67e0
    #9 0x009e6bcc in 0x9e6bcc
    #10 0x009e7f64 in 0x9e7f64
    #11 0x9023bba8 in CooperativeThread
    #12 0x90020c28 in _pthread_body
    Thread 3:
    #0 0x9000508c in syscall
    #1 0x90515d0c in BSD_waitevent
    #2 0x905156dc in CarbonSelectThreadFunc
    #3 0x90020c28 in _pthread_body
    Thread 4:
    #0 0x9003e9a8 in semaphore_wait_signal_trap
    #1 0x9003e7c4 in _pthread_cond_wait
    #2 0x9051dbf0 in CarbonOperationThreadFunc
    #3 0x90020c28 in _pthread_body
    PPC Thread State:
    srr0: 0x00a15b8c srr1: 0x0200f030 vrsave: 0x00000000
    xer: 0x20000000 lr: 0x006d6770 ctr: 0x00defd50 mq:
    0x00000000
    r0: 0x006d6770 r1: 0xbffff460 r2: 0x0104c000 r3: 0x00000000
    r4: 0x00000000 r5: 0x0000004d r6: 0x011e420a r7: 0x000000b0
    r8: 0x02befe88 r9: 0xa0220a00 r10: 0x0250e760 r11:
    0xa0221738
    r12: 0x012e28b4 r13: 0x00000000 r14: 0x00000000 r15:
    0x00000000
    r16: 0x00000000 r17: 0x00000000 r18: 0x00000000 r19:
    0x00000000
    r20: 0xbffffe18 r21: 0x00000001 r22: 0x012632a8 r23:
    0x011e34bc
    r24: 0x00000001 r25: 0x00000001 r26: 0x011e41c0 r27:
    0x02cf2d50
    r28: 0x02cf2d70 r29: 0x00000000 r30: 0x0286bdc0 r31:
    0x00000000
    I think I know the cause of the program though. I was trying
    to install some extensions using the extension manager. After I
    launched Dreamweaver after installing the extensions, the problem
    started.
    I have the extensions that I was trying to install if that
    would help.
    I would really like someone to help me with this problem.
    Please tell me if you don't think this is the correct forum to post
    it in.
    Maybe it is Apple's fault.
    Thanks in advance.
    Jylan

    Have you tried uninstalling that extension? Which one was it?
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "jyilan" <[email protected]> wrote in
    message
    news:[email protected]...
    >I have a problem with Dreamweaver MX "unexpectedly
    quitting," every time I
    >try
    > to open the program. I am running Mac OS 10.2.8. I have
    the console crash
    > log
    > for the program which I'll paste below.
    >
    >
    quote:
    > Command: Dreamweaver MX
    > PID: 1201
    >
    > Exception: EXC_BAD_ACCESS (0x0001)
    > Codes: KERN_PROTECTION_FAILURE (0x0002) at 0x00000004
    >
    > Thread 0 Crashed:
    > #0 0x00a15b8c in 0xa15b8c
    > #1 0x006d6770 in 0x6d6770
    > #2 0x006d4b60 in 0x6d4b60
    > #3 0x00216894 in 0x216894
    > #4 0x00215ab0 in 0x215ab0
    > #5 0x00a25b94 in 0xa25b94
    > #6 0x00a25cec in 0xa25cec
    > #7 0x00a29924 in 0xa29924
    > #8 0x00a29750 in 0xa29750
    >
    > Thread 1:
    > #0 0x90073ba8 in mach_msg_trap
    > #1 0x90005ed0 in mach_msg
    > #2 0xc0009190 in __ape_internal
    > #3 0xc0000efc in __ape_agent
    > #4 0x90020c28 in _pthread_body
    >
    > Thread 2:
    > #0 0x90073ba8 in mach_msg_trap
    > #1 0x90005ed0 in mach_msg
    > #2 0x9022a720 in SwitchContexts
    > #3 0x90224fc8 in YieldToThread
    > #4 0x90243128 in SetThreadState
    > #5 0x9026d948 in SetThreadStateEndCritical
    > #6 0x009e7c28 in 0x9e7c28
    > #7 0x009e68e4 in 0x9e68e4
    > #8 0x009e67e0 in 0x9e67e0
    > #9 0x009e6bcc in 0x9e6bcc
    > #10 0x009e7f64 in 0x9e7f64
    > #11 0x9023bba8 in CooperativeThread
    > #12 0x90020c28 in _pthread_body
    >
    > Thread 3:
    > #0 0x9000508c in syscall
    > #1 0x90515d0c in BSD_waitevent
    > #2 0x905156dc in CarbonSelectThreadFunc
    > #3 0x90020c28 in _pthread_body
    >
    > Thread 4:
    > #0 0x9003e9a8 in semaphore_wait_signal_trap
    > #1 0x9003e7c4 in _pthread_cond_wait
    > #2 0x9051dbf0 in CarbonOperationThreadFunc
    > #3 0x90020c28 in _pthread_body
    >
    > PPC Thread State:
    > srr0: 0x00a15b8c srr1: 0x0200f030 vrsave: 0x00000000
    > xer: 0x20000000 lr: 0x006d6770 ctr: 0x00defd50 mq:
    0x00000000
    > r0: 0x006d6770 r1: 0xbffff460 r2: 0x0104c000 r3:
    0x00000000
    > r4: 0x00000000 r5: 0x0000004d r6: 0x011e420a r7:
    0x000000b0
    > r8: 0x02befe88 r9: 0xa0220a00 r10: 0x0250e760 r11:
    0xa0221738
    > r12: 0x012e28b4 r13: 0x00000000 r14: 0x00000000 r15:
    0x00000000
    > r16: 0x00000000 r17: 0x00000000 r18: 0x00000000 r19:
    0x00000000
    > r20: 0xbffffe18 r21: 0x00000001 r22: 0x012632a8 r23:
    0x011e34bc
    > r24: 0x00000001 r25: 0x00000001 r26: 0x011e41c0 r27:
    0x02cf2d50
    > r28: 0x02cf2d70 r29: 0x00000000 r30: 0x0286bdc0 r31:
    0x00000000
    >
    >
    > I think I know the cause of the program though. I was
    trying to install
    > some
    > extensions using the extension manager. After I launched
    Dreamweaver after
    > installing the extensions, the problem started.
    > I have the extensions that I was trying to install if
    that would help.
    > I would really like someone to help me with this
    problem. Please tell me
    > if
    > you don't think this is the correct forum to post it in.
    > Maybe it is Apple's fault.
    > Thanks in advance.
    > Jylan
    >

  • Need Help with Dreamweave MX!

    Hello all!
    I'm an artist and I'm putting my new website together but I'm
    stuck on something. I have 3 order forms that are all .doc files.
    How do I make a link in Dreamweaver so when the person clicks on
    the link... they download those forms? I did it once but it was a
    long time ago and I forgot how. Don't talk to me like I'm some kind
    of HTML expert. ;) I suck with HTML. If you can use simple easy
    instructions I'd appreciate it. :) I'm not very experienced with
    Dreamweaver.
    Thanks! :)

    Mahalo, Inali.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "Inali Kealoha" <[email protected]> wrote in
    message
    news:ej5e0k$255$[email protected]..
    > lol Teasing is fine. :) Sometimes it's *REALLY* hard to
    tell online the
    > person's meaning without the use of emoticons. Either
    way, what Murray
    > said
    > worked great. It was so simple too and now I know how to
    do it from now
    > on.
    > I've only used Dreamweaver once before and only because
    the person who was
    > to
    > build my site was taking too long. I just decided I'd do
    it myself. :)
    >
    > Now it is completed! Well, except for the fact that
    while deleting my old
    > version of the site I think I accidentally deleted my
    entire coppermine
    > gallery
    > in the process. Oops. :( Oh well. Hopefully that can be
    fixed without too
    > much
    > work. Thanks for the help! :)
    >
    > Inali
    >
    http://www.spiritcreations.wulfpawz.net/
    >

  • Help with Dreamweaver flash image viewer

    Hi all
    Would like some help with Dreamweavers Flash image viewer.
    Everything is working properly except when i try to link a picture, and have set the imagelinkTarget value to _blank the link always navigates away from my site and does not open in a new window.
    I have tried all the values for the imageLinkTarget and nothing works..
    Here is my code
    <script type="text/javascript">
    AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0, 28,0','width','190','height','190','src','images/ad1','quality','high','flashvar s','flashlet={imageLinkTarget:\'_blank\',captionFont:\'Verdana\',titleFont:\'Verdana\',sh owCo ntrols:false,frameShow:false,slideDelay:5,captionSize:14,captionColor:#000000,ti tleSize:10,transitionsType:\'Fade\',titleColor:#333333,slideAutoPlay:true,imageU RLs:[\'images/image1.jpg\',\'images/image2.jpg\',\'images/image3.jpg\',\'images/ image4.jpg\'],slideLoop:true,frameThickness:2,imageLinks:[\'http://www.bowlsaustralia.com.au\',\'http://www.smh.com.au\'],frameColor:#333333,bgColor:# FF9966,imageCaptions:[\'Bowls Australia\',\'Sydney Morning Herald\']}','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFl ash','flash_component','ImageViewer.swc','movie','images/ad1' ); //end AC code
    </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0, 28,0" width="190" height="190">
              <param name="flash_component" value="ImageViewer.swc" />
              <param name="movie" value="images/ad1.swf" />
              <param name="quality" value="high" />
              <param name="FlashVars" value="flashlet={imageLinkTarget:'_blank',captionFont:'Verdana',titleFont:'Verd ana',showControls:false,frameShow:false,slideDelay:5,captionSize:14,captionColor :#000000,titleSize:10,transitionsType:'Fade',titleColor:#333333,slideAutoPlay:tr ue,imageURLs:['images/image1.jpg','images/image2.jpg','images/image3.jpg','image s/image4.jpg'],slideLoop:true,frameThickness:2,imageLinks:['http://www.bowlsaustralia.com.au','http://www.smh.com.au'],frameColor:#333333,bgColor:#FF9 966,imageCaptions:['Bowls Australia','Sydney Morning Herald']}" />
              <embed src="images/ad1.swf" quality="high" flashvars="flashlet={imageLinkTarget:'_blank',captionFont:'Verdana',titleFont:' Verdana',showControls:false,frameShow:false,slideDelay:5,captionSize:14,captionC olor:#000000,titleSize:10,transitionsType:'Fade',titleColor:#333333,slideAutoPla y:true,imageURLs:['images/image1.jpg','images/image2.jpg','images/image3.jpg','i mages/image4.jpg'],slideLoop:true,frameThickness:2,imageLinks:['http://www.bowlsaustralia.com.au','http://www.smh.com.au'],frameColor:#333333,bgColor:#FF9 966,imageCaptions:['Bowls Australia','Sydney Morning Herald']}" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFl ash" type="application/x-shockwave-flash" width="190" height="190"> </embed>
            </object>
    </noscript>
    any help would be greatly appericated
    Ken

    I just googled and found lots of folks with the same problem.  One fellow wrote this as a soluton:
    "All you have to do is
    remove the values from the imageLinks in the flash element. That
    should fix it."
    Does it?
    E. Michael Brandt
    www.divahtml.com
    www.divahtml.com/products/scripts_dreamweaver_extensions.php
    Standards-compliant scripts and Dreamweaver Extensions
    www.valleywebdesigns.com/vwd_Vdw.asp
    JustSo PictureWindow
    JustSo PhotoAlbum, et alia

  • Help with Dreamweaver Validate Form Behavior

    Hello,
    I'm attempting to use Dreamweaver to validate form fields. This would work quite well except for in this case I'm using custom form code which is coming from Salesforce.com. The issue has been that the Salesforce.com web-to-lead form comes with "name" attributes on every form field item. If I change these names to make the validation look nicer, for example from first_name to First Name, then the web to lead form breaks. Is there another way to utilize Dreamweavers form validation by creating by own names for each form element instead of using "name"? The objective is to give the user something that looks good... like:
    First Name is required
    Last Name is required
    And with the Salesforce custom name fields it ends up looking like:
    900000xxxxx213s is required
    or
    last_name is required
    Thanks for any help!

    The name attribute of a form cannot contain spaces. That's why the validation behavior breaks.
    The Dreamweaver Validate Form behavior is rather crude and well past its sell-by date. Use the Spry Validation widgets instead: http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WS267C8659-3AEF-4956-8268-E38CA4CAFAD3a .html.

  • I need help with Dreamweaver.

    I had purchased Dreamweaver CS5-5 version 11.5 last year for my Mac X 10.8.3. Working on several web pages did just fine. I did not use Dreamweaver for the last 4 months. I do pro bono for four sites and they had not given me changes until yesterday - 05/07/13. So I opened Dreanweaver and loaded what I thought was the current pages to the web site I wanted to work on. Surprise!!! What uploaded on Weaver was old pages of the same site I did several years ago. The current pages were not there. They are current on the internet.
    I have chased all over Adobe, the internet, reloaded Dreamweaver, tried to download from the internet the current pages through FTP to no avail. I find it extremely difficult to find someone at Adobe - a real person in the USA that speaks English - to help me out. I was shoved from one place to another. I finally got a real person in the last hour but he was from India. He wanted to take control of my computer. This was not to be done. I had PC's for 20 years. A Phillipino took over my PC in 2011 to correct some problems and froze my hard drive. The computer was trash after that. This is why I have a Mac.
    All I want to do is to make some changes to the current web sites I am the web master for. I spent over $300.00 for Dreamweaver and it should not be doing this.
    Any help would be appreciated.

    Nancy O.
    I am at a point that I thinking about dropping Dreamweaver. I feel that I should not go through all this.
    I do not understand Dreamweaver as much as you do. Being that now I do not work with it frequently.
    I just know it was simpler before.
    On first using Dreamweaver I just downloaded it from the CD and went about my business. As stated this was up until four months ago.
    For the amount paid for this software I should not have all of these problems. I should have bee able to do my work as before.
    I am the type that needs everything written to understand what to do. In college I took tech writing. That taught me to explain everything in detail.
    A lot of the software instructions could be better written. Just a rant on my part. (I find this in many assembly instructions)
    I have not done your latest yet. I will try if I can understand what you suggest.
    At this time I really don't want to do anything.
    As stated - frustrated.
                   +++++++ 
    "The Constitution is not an instrument for the government to restrain the people,
    it is an instrument for the people to restrain the government,
    least it come to dominate our lives and interests."
    Patrick Henry1736-1799
                       +++++++
            Non Sibi Sed Patriae
    "Honor,Courage,Commitment"
                       ++++++
    "I can imagine a no more rewarding career, and any man who may be asked
    in this century what he did to make his life worthwhile,
    I think can respond with a good deal of pride and satisfaction:
    'I served in the United States Navy'
    JFK
                     +++++++++
    War is an ugly thing, but not the
    ugliest of things. The decayed and
    degraded state of moral and patriotic
    feeling which thinks that nothing is
    worth war is much worse.
    The person who has nothing for
    which he is willing to fight, nothing
    which is more important than his own
    personal safety, is a miserable
    creature and has no chance of being
    free unless made and kept so by
    the exertions of better men than
    himself.
    John Stewart Mill
                    ++++++++
    Life is not a journey to the grave with
    the intention of arriving safely in a
    pretty and well preserved body, but
    rather to skid in broadside,
    thoroughly used up, totally worn out,
    and loudly proclaiming
               -- WOW --
    What a hell of a ride!
                       ++++++++
    [email protected]

  • Need help with Dreamweaver 8

    We are a church who uses AltoMP3 Gold, Macromedia Dreamweaver and GoDaddy.com to upload our sermons to our website as well as offer access to Itunes subscribers.  We have used this system for years now and everything has worked great except for some problems with GoDaddy last year.  However, we just discovered that Itunes subscribers cannot get any of our 2014 podcasts.  The sermons can be accessed from our website, just not through Itunes.  As far as I know, the coding has not been changed from the original design, except for the weekly updates as to name of MP3 file, dates, etc.  Can you help me figure out why the access to sermons stopped for Itunes beginning in 2014?  I am not a programmer, just a volunteer with limited knowldge.  Thank you

    Sounds like an iTunes issue.  Have you checked iTunes support?
    Nancy O.

  • Help with Dreamweaver CS5 spry menus. Menu is not dropping down in IE7.

    Hello.
    We recently upgraded from GoLive CS3 to Dreamweaver CS5. Wow! This has been a big change for us. We are having trouble with a website that we are building, specifically the Spry Menu drop downs not appearing correctly in IE7 and older. While the dropdown menu appears in other browsers, it is not dropping down at all in IE7 and earlier versions. After researching this topic on many websites, including this forum, we are still unable to resolve our particular issue. We have tried many of the suggestions that are common to our problem, but have not found a solution as yet. Could someone please check out this page for us, and possibly give us some advise. We are working on Mac OSX. Thank you in advance for any suggestions you may offer.
    http://www.advertools.net/pgtdemo/index.html

    When I added the following to the document
    <style>
    #main_image {position:static;}
    </style>
    the menu items appeared albeit in the wrong position.
    The reason for the hidden menu items is because #main_image had a position of relative, effectively creating a flow of its own rather than following the natural flow of the document.
    Now for the postion of the submenu. If I add the following style rules to the document the submenu items are in the correct position
    ul.MenuBarHorizontal li {text-align: left;}
    ul.MenuBarHorizontal a {text-align: center;}
    In the first line I have reset the rule that you had changed to center align and in the second line (which is not in the original CSS) I have aligned the text in the anchor tag to align center.
    The reason is that IE<8 behaves differently to other browsers when it comes to list items causing the nested list items (submenu) to align themselves to the center of the text of the parent list item.
    I hope the above helps.
    Gramps

  • 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

Maybe you are looking for