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.

Similar Messages

  • Need help with Pivoting rows to columns

    Hi,
    I need help with pivoting rows to columns. I know there are other posts regarding this, but my requirement is more complex and harder. So, please give me a solution for this.
    There are two tables say Table 1 and Table 2.
    Table1
    name address email identifier
    x e g 1
    f s d 2
    h e n 3
    k l b 4
    Table2
    identifier TRno zno bzid
    1 T11 z11 b11
    1 T12 z12 b12
    1 T13 z13 b13
    2 T21 z21 b21
    2 T22 z22 b22
    As you can see the identifier is the column that we use to map the two tables. The output should be like below
    output
    name address email identifier TRno1 zno1 bzid1 TRno2 zno2 bzid2 TRno3 zno3 bzid3
    x e g 1 T11 z11 b11 T12 z12 b12 T13 z13 b13
    f s d 2 T21 z21 b21 t22 z22 b22
    Also we do not know exactly how many TRno's, zno's, etc each value in the identifier will have. There may be only 1 TRNO, zno and bzid, or there may be four.
    All the values must be in separate columns, and not be just comma delimitted. There are also other conditions that i have to add to restrict the data.
    So, can you please tell me what is should use to get the data in the required format? We are using Oracle 10g. Please let me know if u need any more information

    Something like this ?
    SCOTT@orcl> ed
    Wrote file afiedt.buf
      1  select a.name,
      2  a.address,
      3  a.email,
      4  b.* from (
      5  select distinct identifier
      6  ,max(trno1) trno1
      7  ,max(zno1) zno1
      8  ,max(bzid1) bzid1
      9  ,max(trno2) trno2
    10  ,max(zno2) zno2
    11  ,max(bzid2) bzid2
    12  ,max(trno3) trno3
    13  ,max(zno3) zno3
    14  ,max(bzid3) bzid3
    15  ,max(trno4) trno4
    16  ,max(zno4) zno4
    17  ,max(bzid4) bzid4
    18  from (select identifier
    19  ,decode(rn,1,trno,null) trno1
    20  ,decode(rn,1,zno,null) zno1
    21  ,decode(rn,1,bzid,null) bzid1
    22  ,decode(rn,2,trno,null) trno2
    23  ,decode(rn,2,zno,null) zno2
    24  ,decode(rn,2,bzid,null) bzid2
    25  ,decode(rn,3,trno,null) trno3
    26  ,decode(rn,3,zno,null) zno3
    27  ,decode(rn,3,bzid,null) bzid3
    28  ,decode(rn,4,trno,null) trno4
    29  ,decode(rn,4,zno,null) zno4
    30  ,decode(rn,4,bzid,null) bzid4
    31  from (select identifier,
    32  trno,bzid,zno,
    33  dense_rank() over(partition by identifier order by trno,rownum) rn
    34  from table2)
    35  order by identifier)
    36  group by identifier) b,table1 a
    37* where a.identifier=b.identifier
    SCOTT@orcl> /
    NAME       ADDRESS    EMAIL      IDENTIFIER TRNO1      ZNO1       BZID1      TRNO2      ZNO2       BZID2      TRNO3      ZNO3       BZID3      TRNO4      ZNO4       BZID4
    x          e          g          1          T11        z11        b11        T12        z12        b12        T13        z13        b13
    f          s          d          2          T21        z21        b21        T22        z22        b22
    SCOTT@orcl> select * from table1;
    NAME       ADDRESS    EMAIL      IDENTIFIER
    x          e          g          1
    f          s          d          2
    h          e          n          3
    k          l          b          4
    SCOTT@orcl> select * from table2;
    IDENTIFIER TRNO       ZNO        BZID
    1          T11        z11        b11
    1          T12        z12        b12
    1          T13        z13        b13
    2          T21        z21        b21
    2          T22        z22        b22
    SCOTT@orcl>Regards
    Girish Sharma

  • Help with two scripts - Mounting remote DMG and Checking which network I'm connected to

    Hey guys, I need some help with two separate scripts:
    1. The first script I'm trying to create to mount a DMG stored remotely on another Mac using an AppleScript or shell script. Using the following:
    set cmd to "hdiutil mount 'afp://username:[email protected]/Lion/Users/username/Desktop/Test.sparseim age'"
    do shell script cmd
    results in the following error:
    error "hdiutil: mount failed - not recognized" number 1
    I'm not very experienced regarding AppleScript or using hdiutil, could somebody point out what's wrong with my script?
    2. The second script I'm working on to try and essentially prevent the 'Could Not Find Server' Finder dialog when a network mount is unavailable. I guess what I'd like it to do is detect which network I'm connected to, and if I'm connected to the correct network, then mount the shares, otherwise just fail silently without any errors. From the searching I've done, using try statements should do this, but they do not, and I'm still presented with an error dialog after the server cannot be found.
    Does anybody have any suggestions on this script? Also, I've seen some tips regarding detecting which wireless network the Mac is connected to, which could work, but what about when connected via Ethernet?
    Thanks!

    Edit: I need to clarify on my first script request:
    I need to mount the DMG on the remote Mac, not on the Mac I'm running the script from.

  • Help with two columns

    So I have two columns on my page and when I type the left column spills over into the right column. But this is not what I want to happen. I want the text that I type on the left to stay on the left and the text on the right to stay on the right. Please Help!

    Welcome to Apple Discussions
    I'd use a text box for one column or the other or text boxes for both. You can then link the left box on one page to the left box on the next page.
    Another option is to use a two-column table, but I think text boxes is easier.

  • 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

  • Problem with faux column and 100% min height

    hello
    i',m trying to create a faux column on this page:
    http://www.malcmabe.co.uk/listtest.html.
    the column i'm trying to do is the left hand side menu
    column.
    i just can't get this to work, so i'm obviousley missing
    something.
    also, i've set the wrapper as minimum height of 100%. this
    isn't working, so my hunch is that it's having a knock on effect to
    the measurements of the left hand column....but i may be wrong
    any help would be appreciated.
    the css file is
    http://www.malcmabe.co.uk/listtest.css
    malc

    malcster2 wrote:
    > hello
    >
    > i',m trying to create a faux column on this
    > page:
    http://www.malcmabe.co.uk/listtest.html.
    > the column i'm trying to do is the left hand side menu
    column.
    >
    > i just can't get this to work, so i'm obviousley missing
    something.
    >
    > also, i've set the wrapper as minimum height of 100%.
    this isn't working, so
    > my hunch is that it's having a knock on effect to the
    measurements of the left
    > hand column....but i may be wrong
    >
    > any help would be appreciated.
    >
    > the css file is
    http://www.malcmabe.co.uk/listtest.css
    >
    > malc
    Malcolm
    That's not quite how faux columns work - you'd make an image
    the width
    of your container with the dimensions you need - perhaps a
    line only to
    separate a left and right column or something a little more
    detailesd -
    the image's height can be sliced very small as it will repeat
    on the y
    axis, attached via css to the container. You can then use
    margins or
    divs floated left and right to keep your content on either
    side.
    Something like this I made earlier......
    http://www.bealeandpyper.co.uk/
    and the background image......
    http://www.bealeandpyper.co.uk/p7bpassets/images/p7bp_layout.jpg
    btw most of us in here use the faster NNTP for accessing the
    newsgroups
    - OE, Outlook, Thunderbird and/or dedicated mail/newsreader
    apps would
    do to access them. Try clicking this link.....
    news://forums.macromedia.com
    HTH
    chin chin
    Sinclair

  • A little help with my first 2 column liquid hybrid effort.

    Hello all:
    I am attempting my first liquid hybrid layout using DW's "2 column hybrid, left column, header, footer". layout and it's going pretty good but... I can't seem to get rid of the black line just below the top area that contains the two samle graphics. I believe it may be an gap between the "topcontainer" div and the "container" div below it. I just can't figure out how to fix it.
    Here's a link to show you what I am trying to accomplish. http://reynolds-marketing.com/twotest/atest.html
    Attached are the html and css files.
    Any suggestions would be very much appreciated. TIA!

    Hi
    No, that is what I was expecting.
    You will have to use IE conditional comments (also called conditional statements), they go just above the closing </head> in your html or place the IE only css in a separate css file (what I normally do), and link to them inside the IECC in your html file.
    My previous suggestions apply for correcting the problem, and for IECC usage see - http://www.quirksmode.org/css/condcom.html,
    (use initially)
    <!--[if IE]>
    I get nothing for the following, but -
    Have you checked out the 'css anthology' book from sitepoint, as this will help with such problems, see the post from Nadia - http://forums.adobe.com/thread/497065?tstart=0, these are an excellent help (and on offer at the moment), I can personally recommend the "Everything you know about css is wrong" book, especially once you are happy creating 'standard' css layouts, and there is a plug-in for IE6 & 7 to enable the css layout mode it discusses.
    PZ

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

  • Report Designer with two Structure in Column

    Hi Experts,
      Is not possible a Report Designer use a query with 2 structure in column ?
      If  i need use two structure in the column, exist a workaround for this case ?
    Tks and best regads ...
    Alex

    Unfortunately not.
    You may try to work around to have set of virtual chars and key figures; but resposne time will not be encouraging.
    Ravi Thotahdri

  • 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

  • How can i build table with two user name columne  ?

    How can I build view with two columns for user name ( one create and the other
    Can change also ) 
    And to display full name ( the user name is the key but not display  ) ?

    Hi,
    Creating View
    •     From initial screen of data dictionary(T.Code: SE11), enter the name of object i.e. view.
    •     Select view radio button and click on the push button.
    •     Dialog box is displayed for types of views.
    •     Select the view type.
    •     On the next screen, you have to pass following parameters.
    •     Short text
    •     In the table box you need to enter the table names, which are to be related.
    •     In join table box you need to join the two tables.
    •     Click on the TABFIELD. System displays the dialog box for all the table fields and user can select the fields from this screen. These fields are displayed in the view fields box.
    •     Save and Activate: When the view is activated, view is automatically created in the underlying database system. As long as the table exists in the database, the view also exists (Unless you delete it).
    Regards,
    Bhaskar

  • Help with Section Div tag

      <!--MAIN CONTENT-->
                    <div id="main">
                     <!--LEFT COLUMN-->
                     <section id="left.col">dsdsfdsf</p></section>
                    </div>
    Here is where I can't change the width of my section div. I want a left colm and right colm but I cant change the width of the left.col section. Then I can float it left and add the right colmn.
    HTML:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>RH Wholesale Supply</title>
    <link href="styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <!--Wrapper-->
    <div id="wrapper">
                  <!--HEADER---->
                  <header id="header">
                  <!--LOGO-->
                  <img src="images/images/images/logo.png" width="166" height="74"  alt=""/>
                  <!--NAV-->
                  <nav id="nav">
                    <ul>
                    <li><a href="index.html" class="home">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Online Store</a></li>
                    <li><a href="#">Contact</a></li>
                    </ul>
                  </nav>
                  </header>
                  <!--BANNER-->
                  <div id="banner">
                  <img src="images/san_francisco_skyline699.jpg" width="1920" height="1080"  alt=""/> </div>
                      <!--MAIN CONTENT-->
                    <div id="main">
                     <!--LEFT COLUMN-->
                     <section id="left.col">dsdsfdsf</p></section>
                    </div>
                     <!--FOOTER-->             
      <footer id="footer">
      Copyright @ RH WHolesale 2013
      </footer>
    </div>
    </body>
    </html>
    CSS:
    @charset "UTF-8";
    /* CSS Document */
    body {
              margin-top: 0px;
              background-image: url(images/images/images/background..png);
              background-repeat: repeat-x;
              font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
              font-size: 13px;
    #wrapper {
              width: 1000px;
              margin-left: auto;
              margin-right: auto;
    /* HEADER & LOGO */
    #header {
              float: left;
    #header img {
              float: left;
              margin-top: 5px;
              margin-left: 25px;
    /* NAV BAR */
    #nav{
              list-style: none;
              padding-left: 80px;
              padding-top: 34px;
              width: 842px;
    #nav ul {
              font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
              text-align: center;
    #nav li{
              display: inline;
              padding-left: 25px;
              padding-right: 25px;
              color: #000000;
              font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
              font-weight: normal;
              font-size: 16px;
              padding-top: 10px;
              padding-bottom: 10px;
    #nav a{
              list-style-type: none;
              color: #FFFFFF;
              text-decoration: none;
    #nav a:hover  {
              text-decoration: overline;
              color: #FFFFFF;
              font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
              font-size: 16px;
    #nav .home , #nav .about{
    text-decoration: overline;
              color: #FFFFFF;
              font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
              font-size: 16px;
    /* MAIN IMAGE */
    #banner {
              float: left;
              overflow-x: hidden;
              overflow-y: hidden;
              margin-top: 25px;
              width: 1000px;
              height: 300px;
              box-shadow: 0px 0px 5px 1px #000;
    #banner img {
              margin-top: -318px;
              margin-left: -144px;
    /* MAIN BODY FOR CONTENT */
    #main {
              width: 950px;
              float: left;
              height: 251px;
              margin-left: 25px;
              margin-right: 25px;
              margin-top: 25px;
    h1 {
              font-size: 24px;
              font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
              color: #000000;
    #left.col {
    /* FOOTER */
    #footer {
              float: left;
              width: 1000px;
              text-align: center;
              font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
              font-size: 12px;
              margin-top: 25px;

    As recommended in the HTML5 specificiations, I use <aside> tags for sidebars. 
    <article> for content, <nav> for menus, <header> for headers, <footer> for footers, etc...
    See example below, view source in browser to see the code:
    http://alt-web.com/sandbox/HTML5-BasicLayout.html
    aside {
    margin: 0;
    padding: 0 1%;
    width: 33.33%;  /**3 equal width columns**/
    float: left;
    min-height: 330px;
    Nancy O.

  • Can someone help with some coding on a muse HTML page that exported incorrectly?

    I run an NGO called warriors organization. It's an NGO trying to protect indigenous cultures in tanzania from loosing their cultures.. Our president is running a marathon In a week to raise money to build a school for maasai children.. and the marathon page got garbled on export from muse. Can someone help with recoding that page? I'm traveling and don't have the muse work file with me.. Any help is greatly appreciated.. Take a look at http://warriorsorganization.org/marathon.html. I have a screen shot of how the page should look. Contact me at [email protected]
    Thank you,
    Aric

    1. yes
    2. yes
    3. No. DVD players can't play BluRay discs -- even if they are burned to a DVD disc.
    4. 1080p50 is a perfectly legitimate mode for shooting, particularly if you're shooting video with a lot of action, since it has double the actual frames of 1080i50. However, your output video may or may not actually have 50p frames (or even be 1920x1080), depending on what form of media you're publishing as. The BluRay files that Premiere Elements outputs, for instance are 50i.

  • Help with rollover menu bar on my Home page

    I would like some help with my site
    www.didgesoundtherapy.co.uk
    Please look at my menu bar on the home page.
    Roll over the buttons on the menu of the home page and they come up with the wrong message when it is rolled over. I hope this makes sense.
    I would love some help on this
    Kind regards
    Gregg

    Each button displays the same text with html tacked on as the button except for the Home page of course. What should the text be?
    OT

  • Help with a video intro on my home page

    Hello, I can use some help or suggestions with a video intro
    on my home page http: www.godincharge.com. It was originally an mp4
    I converted to the swf format using Allok Video to FLV Converter.
    The file is 650k and downloads painfully slow on dial up
    connections. Can anyone help me cut the file size or tell me if I
    embedded it correctly.

    Each button displays the same text with html tacked on as the button except for the Home page of course. What should the text be?
    OT

Maybe you are looking for