4 Replies Latest reply on May 25, 2010 8:03 AM by Nick@Tag

    Inserting DIVs in HTML view screws Design view but preview is fine

    Nick@Tag Level 2

      RH8 HTML

      Hi all,

      Ive been working on a fix for a client, forcing a footer banner to the bottom of the screen, regardless of content in the page. Its nearly working fine, just a bit more tweaking, but one problem I am having.


      I am editing and adding <div> in HTML view, so that the positioning works.

      However, when I view the page in Design view, its all messed up, the content is really narrow and stretches down the page for a long time. However, when I preview, and generate the page it looks fine.


      Its an issue, because the client will be given the RH source files at the end of the project, and with the front end editor looking like this its not going to be weasy for the to edit it, let alone me finish with all the content.


      Has anyone come across this before? Is the Design viewer not the best at displaying div content ?


      The HTML where the <div> is set off before content is entered:


      <div id="wrap">
          <div id="main">
              <div id="spacing">

      ***********all content in here************




      The CSS that the <div> is calling

      #wrap {
          min-height: 100%;
          border-left: 1px solid #9ea6ad;
      #main {
          overflow: auto;
          padding-bottom: 54px;
      /* must be same height as the footer */
      #spacing {
          padding: 10px;
      #footer {
          position: relative;
          margin-top: -54px;
          height: 54px;
          background: url(footer.gif) repeat-X;
          clear: both;
          border-left: 1px solid #9ea6ad;
      /* negative value of footer height */
      #footer p {
          padding-top: 15px;
          padding-right: 10px;
          color: #ffffff;
          font-family: Arial, sans-serif;
          font-size: 10pt;
          text-align: right;
      /*Opera Fix*/body:before {
          content: ;
          height: 100%;
          float: left;
          width: 0;
          margin-top: -32767px;