4 Replies Latest reply: Jun 1, 2007 11:33 AM by BruceCSI2 RSS

    Fine in browser, bad in design view

    BruceCSI2 Community Member
      I'm creating a template for a newsletter. The content of the newsletter will be edited by someone from the print world (little web experience, knows nothing of CSS). The layout is as follows:

      Header all the way across
      Two columns, one wider than the other
      Footer all the way across

      It looks fine in the browser, and even at different resolutions. However, as soon as you add too much content into the right column, it drops down below the left. This will freak her out. This is strictly an issue with DW. How do I keep DW from doing this?

      PS: This is behind a firewall, so there's no way to post a link to the page.
        • 1. Re: Fine in browser, bad in design view
          Newsgroup_User Community Member
          BruceCSI2 wrote:


          > PS: This is behind a firewall, so there's no way to post a link to the page.
          >
          Post the code here.

          • 2. Re: Fine in browser, bad in design view
            BruceCSI2 Community Member
            Okay, here it is.
            --------------------------

            <style type="text/css">
            <!--
            body {
            text-align:center;
            margin:0 auto;
            background-color:#fff;
            font-size:62.5%;
            }

            p {
            font-family:Arial, Helvetica, sans-serif;
            font-size:1.1em;
            color:#000;
            }

            h1 {
            font-family:"Times New Roman", Times, serif;
            font-size:2.5em;
            color:#00059b;
            font-weight:bold;
            }

            h2 {
            font-family:Arial, Helvetica, sans-serif;
            font-weight:bold;
            font-variant:small-caps;
            font-size:1.5em;
            color:#cc0000;
            }

            h3 {
            font-family:Arial, Helvetica, sans-serif;
            font-size:1.2em;
            font-weight:bold;
            color:#00059b;
            text-align:center;
            }

            h4 {
            font-family:Verdana, Arial, Helvetica, sans-serif;
            font-size:1.2em;
            color:#fff;
            font-variant:small-caps
            }
            td.bullets {
            background-image:url(graphics/aBulletpoint-Red.gif);
            background-repeat:no-repeat;
            background-position:center;
            width:15px;
            }

            #wrapper {
            text-align:left;
            width:600px;
            background-color:#fff;
            padding-right:25px;
            margin-top:25px;
            }

            #header {
            width:100%;
            }

            #leftcolumn {
            width:440px;
            text-align:left;
            float:left;
            }

            #indinsights, #bizbytes, #smtools {
            width:100%;
            border-bottom:1px solid #ccc;
            margin-top:10px;
            padding-bottom:15px;
            }
            #briefnotes {
            width:100%;
            margin-top:10px;
            padding-bottom:15px;
            }

            #rightcolumn {
            width:145px;
            float:right;
            }

            #inside {
            margin-top:10px;
            float:right;
            margin-right:0px;
            width:100%;
            background-image:url(graphics/tosbg.gif);
            }

            #imageholder {
            margin-top:25px;
            }



            #topagents {
            width:600px;
            }
            -->
            </style>
            </head>

            <body>
            <div id="wrapper">
            <div id="header"><img src="graphics/Blue-Masthead-6-111406.jpg" alt="Sales First masthead" width="600" height="202" border="0" usemap="#Map" />
            <map name="Map" id="Map"><area shape="rect" coords="7,18,105,63" href=" http://www.thewebsite.com" target="_blank" />
            </map></div>
            <div id="leftcolumn">
            <div id="indinsights">
            <table width="90%">
            <tr>
            <td width="58"><img src="graphics/ICON-Insights2.jpg" alt="Industry Insights" /> </td>
            <td width="280" valign="middle"><h1>Industry Insights<a name="industryinsights" id="industryinsights"></a></h1></td>
            </tr>
            </table>
            <h2>This is where the headline for the article goes
            </h2>

            <p>Insert 2 paragraphs of Lorem Ipsum text here</p>
            </div>
            <div id="bizbytes">
            <table width="90%">
            <tr>
            <td width="58"><img src="graphics/ICON-Lightbulb2.jpg" alt="Business Bytes" width="50" height="50" /> </td>
            <td width="280" valign="middle"><h1>Business Bytes<a name="bizbytes" id="bizbytes"></a></h1></td>
            </tr>
            </table>
            <h2>This is where the headline for the article goes
            </h2>

            <p>Insert 2 paragraphs of Lorem Ipsum text here.</p>
            </div>
            <div id="smtools">
            <table width="90%">
            <tr>
            <td width="58"><img src="graphics/ICON-Tools2.jpg" alt="Sales Managers Toolbox" width="50" height="50" /> </td>
            <td width="280" valign="middle"><h1>Sales Manager's Toolbox<a name="smtools" id="smtools"></a></h1></td>
            </tr>
            </table>
            <h2>This is where the headline for the article goes
            </h2>

            <p>Insert 2 paragraphs of Lorem Ipsum text here</p>
            </div>
            <div id="briefnotes">
            <table width="90%">
            <tr>
            <td width="58"><img src="graphics/ICON-Memos2.jpg" alt="Briefly Noted" width="50" height="50" /> </td>
            <td width="280" valign="middle"><h1>Briefly Noted<a name="briefnote" id="briefnote"></a></h1></td>
            </tr>
            </table>
            <p>Following is an overview of recent announcements.

            </p>
            <table width="100%" border="1" cellspacing="0" cellpadding="2">
            <tr>
            <td width="11%"><div align="center">
            <p><b>Memo</b></p>
            </div></td>
            <td width="75%"><p><b>Title and Introduction </b></p></td>
            <td width="14%"><p><b>Date</b></p></td>
            </tr>
            <tr>
            <td><p> </p></td>
            <td><p> </p></td>
            <td><p> </p></td>
            </tr>
            <tr>
            <td><p> </p></td>
            <td><p> </p></td>
            <td><p> </p></td>
            </tr>
            <tr>
            <td><p> </p></td>
            <td><p> </p></td>
            <td><p> </p></td>
            </tr>
            </table>
            <p>This overview is provided for your convenience and is intended only as a summary and reminder of recent announcements. We strongly encourage you to access the Memos section of MAO daily for important business updates.</p>
            </div>
            </div>
            <div id="rightcolumn">
            <div id="inside">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
            <td><img src="graphics/TOCCORNER.gif" width="28" height="19" /></td>
            <td width="82%"> </td>
            </tr>
            <tr>
            <td bgcolor="#0067A4"> </td>
            <td bgcolor="#0067A4"><h4>inside</h4></td>
            </tr>
            <tr>
            <td class="bullets"> </td>
            <td><p><a href="#industryinsights">Industry Insights</a><br />
            The description goes here </p></td>
            </tr>
            <tr>
            <td class="bullets"> </td>
            <td><p><a href="#bizbytes">Business Bytes</a><br />
            The description goes here </p></td>
            </tr>
            <tr>
            <td class="bullets"> </td>
            <td><p><a href="#smtools">Sales Manager's Toolbox</a><br />
            The description goes here
            </p></td>
            </tr>
            <tr>
            <td class="bullets"> </td>
            <td><p><a href="#briefnote">Briefly Noted</a><br />
            An Overview of Recent Memos <br />
            </p></td>
            </tr>
            <tr>
            <td class="bullets"> </td>
            <td><p>Top Agent Offices <br />
            Year-to-Date Sales Rankings </p></td>
            </tr>
            <tr>
            <td><img src="graphics/TOCbottomCORNER.gif" width="28" height="19" /></td>
            <td> </td>
            </tr>
            </table>
            </div>
            <div id="imageholder">
            <img src="graphics/DeliveryMan.jpg" width="134" height="133" /> </div>

            </div> <br style="clear: both;">
            <div id="topagents">
            fjaklf
            </div>
            </div>
            </body>
            </html>

            --------------------------
            Thanks to anyone who can help. As noted, you may have to insert 2 paragraphs of Lorem Ipsum text to see what's happening. I had to remove it because of message size restrictions. Also, the div would move as soon as I put the picture of the delivery man in the right column.
            • 3. Re: Fine in browser, bad in design view
              Newsgroup_User Community Member
              This should work ok. It was probably to do with not giving the tables a
              specific width. I have now and it seems stable in design view.



              <!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=iso-8859-1">
              <title>Untitled Document</title>
              <style type="text/css">
              <!--
              body {
              text-align:center;
              background-color:#fff;
              font-size:62.5%;
              }
              #wrapper {
              text-align:left;
              width:600px;
              background-color:#fff;
              margin-top:25px;
              border: 1px solid #000;
              margin: 0 auto;
              }

              p {
              font-family:Arial, Helvetica, sans-serif;
              font-size:1.1em;
              color:#000;
              }

              h1 {
              font-family:"Times New Roman", Times, serif;
              font-size:2.5em;
              color:#00059b;
              font-weight:bold;
              }

              h2 {
              font-family:Arial, Helvetica, sans-serif;
              font-weight:bold;
              font-variant:small-caps;
              font-size:1.5em;
              color:#cc0000;
              }

              h3 {
              font-family:Arial, Helvetica, sans-serif;
              font-size:1.2em;
              font-weight:bold;
              color:#00059b;
              text-align:center;
              }

              h4 {
              font-family:Verdana, Arial, Helvetica, sans-serif;
              font-size:1.2em;
              color:#fff;
              font-variant:small-caps
              }
              td.bullets {
              background-image:url(graphics/aBulletpoint-Red.gif);
              background-repeat:no-repeat;
              background-position:center;
              width:15px;
              }



              #header {

              }

              #leftcolumn {
              width:440px;
              text-align:left;
              float:left;
              }

              #indinsights, #bizbytes, #smtools {
              width:100%;
              border-bottom:1px solid #ccc;
              margin-top:10px;
              padding-bottom:15px;
              }
              #briefnotes {
              width:100%;
              margin-top:10px;
              padding-bottom:15px;
              }

              #rightcolumn {
              width:145px;
              float:right;
              }

              #inside {
              margin-top:10px;
              background-image:url(graphics/tosbg.gif);
              }

              #imageholder {
              margin-top:25px;
              }



              #topagents {
              width:600px;
              }
              -->
              </style>
              </head>

              <body>
              <div id="wrapper">
              <div id="header"><img src="graphics/Blue-Masthead-6-111406.jpg"
              alt="Sales
              First masthead" width="600" height="202" border="0" usemap="#Map" />
              <map name="Map" id="Map"><area shape="rect" coords="7,18,105,63"
              href=" http://www.thewebsite.com" target="_blank" />
              </map></div>
              <div id="leftcolumn">
              <div id="indinsights">
              <table width="440">
              <tr>
              <td width="58"><img src="graphics/ICON-Insights2.jpg" alt="Industry
              Insights" /> </td>
              <td width="280" valign="middle"><h1>Industry Insights<a
              name="industryinsights" id="industryinsights"></a></h1></td>
              </tr>
              </table>
              <h2>This is where the headline for the article goes
              </h2>

              <p>Insert 2 paragraphs of Lorem Ipsum text here</p>
              </div>
              <div id="bizbytes">
              <table width="90%">
              <tr>
              <td width="58"><img src="graphics/ICON-Lightbulb2.jpg" alt="Business
              Bytes" width="50" height="50" /> </td>
              <td width="280" valign="middle"><h1>Business Bytes<a name="bizbytes"
              id="bizbytes"></a></h1></td>
              </tr>
              </table>
              <h2>This is where the headline for the article goes
              </h2>

              <p>Insert 2 paragraphs of Lorem Ipsum text here.</p>
              </div>
              <div id="smtools">
              <table width="90%">
              <tr>
              <td width="58"><img src="graphics/ICON-Tools2.jpg" alt="Sales
              Managers
              Toolbox" width="50" height="50" /> </td>
              <td width="280" valign="middle"><h1>Sales Manager's Toolbox<a
              name="smtools" id="smtools"></a></h1></td>
              </tr>
              </table>
              <h2>This is where the headline for the article goes
              </h2>

              <p>Insert 2 paragraphs of Lorem Ipsum text here</p>
              </div>
              <div id="briefnotes">
              <table width="90%">
              <tr>
              <td width="58"><img src="graphics/ICON-Memos2.jpg" alt="Briefly
              Noted"
              width="50" height="50" /> </td>
              <td width="280" valign="middle"><h1>Briefly Noted<a name="briefnote"
              id="briefnote"></a></h1></td>
              </tr>
              </table>
              <p>Following is an overview of recent announcements.

              </p>
              <table width="100%" border="1" cellspacing="0" cellpadding="2">
              <tr>
              <td width="11%"><div align="center">
              <p> Memo</p>
              </div></td>
              <td width="75%"><p> Title and Introduction </p></td>
              <td width="14%"><p> Date</p></td>
              </tr>
              <tr>
              <td><p> </p></td>
              <td><p> </p></td>
              <td><p> </p></td>
              </tr>
              <tr>
              <td><p> </p></td>
              <td><p> </p></td>
              <td><p> </p></td>
              </tr>
              <tr>
              <td><p> </p></td>
              <td><p> </p></td>
              <td><p> </p></td>
              </tr>
              </table>
              <p>This overview is provided for your convenience and is intended
              only as a
              summary and reminder of recent announcements. We strongly encourage you to
              access the Memos section of MAO daily for important business updates.</p>
              </div>
              </div>

              <div id="rightcolumn">
              <div id="inside">
              <table width="145" border="0" cellspacing="0" cellpadding="0">
              <tr>
              <td><img src="graphics/TOCCORNER.gif" width="28" height="19" /></td>
              <td width="82%"> </td>
              </tr>
              <tr>
              <td bgcolor="#0067A4"> </td>
              <td bgcolor="#0067A4"><h4>inside</h4></td>
              </tr>
              <tr>
              <td class="bullets"> </td>
              <td><p><a href="#industryinsights">Industry Insights</a><br />
              The description goes here </p></td>
              </tr>
              <tr>
              <td class="bullets"> </td>
              <td><p><a href="#bizbytes">Business Bytes</a><br />
              The description goes here </p></td>
              </tr>
              <tr>
              <td class="bullets"> </td>
              <td><p><a href="#smtools">Sales Manager's Toolbox</a><br />
              The description goes here
              </p></td>
              </tr>
              <tr>
              <td class="bullets"> </td>
              <td><p><a href="#briefnote">Briefly Noted</a><br />
              An Overview of Recent Memos <br />
              </p></td>
              </tr>
              <tr>
              <td class="bullets"> </td>
              <td><p>Top Agent Offices <br />
              Year-to-Date Sales Rankings </p></td>
              </tr>
              <tr>
              <td><img src="graphics/TOCbottomCORNER.gif" width="28" height="19"
              /></td>
              <td> </td>
              </tr>
              </table>
              </div>
              <div id="imageholder">
              <img src="graphics/DeliveryMan.jpg" width="134" height="133" /> </div>

              </div><!-- end rightcolumn -->
              <br style="clear: both;">
              <div id="topagents">
              fjaklf
              </div>
              </div>
              </body>
              </html>
              </html>


              • 4. Re: Fine in browser, bad in design view
                BruceCSI2 Community Member
                Unfortunately, not so on my machine. hmmmmmm
                Thanks though.