2 Replies Latest reply on May 11, 2010 9:40 AM by Nancy OShea

    How to use CSS to allow resizing for banner and footer in template

    TPK

      It has been awhile since I have been able to work with CSS and HTML. Now, in my present position, I need to construct a number of pages for my company Intranet.

       

      I have chosen to use HTML and lean heavily on CSS for formatting. I am using Dreamweaver CS3 and one of its templates “2 column fixed, left sidebar, header and footer”.

       

      I am also using a Spry “accordion” widget to cut down on overall page length.

       

      The pages need to match all the other company pages in look and feel (the other company pages were created and are maintained using Dreamweaver 8). These pages do not rely heavily on CSS, but instead use tables and nested tables for their construction.

       

      The template “2 column fixed, left sidebar, header and footer” fits the overall design well. With some minor adjustments for spacing and color it behaves as it should.

       

      Where I am having trouble (and this is likely due to my lack of experience with complex CSS rules) is in getting the header and footer of the template to keep extending if the user increases the horizontal dimension of the page while keeping the content at a fixed or limited maximum horizontal dimension.

       

      My design goal is:

      1)      Allow the header and footer to horizontally increase to fill the browser window.

      2)      Keep the width dimensions for the sidebar fixed.

      3)      Keep the width dimension for the Content portion of the page at a limited maximum, but allow it to degrade gracefully should the monitor resolution drop below 1024 px in width.

       

      I have tried using “width: 100%” in specific areas of the CSS, but unfortunately when I do that if the user scales their page down horizontally beyond a threshold, the content (the Spry Accordion piece) drops to the area below the left sidebar, creating a large blank area at the top of the page below the banner.

       

      So, how do I use CSS to tell the banner and footer to resize (infinitely) with the browser window, while keeping the left sidebar at a fixed width and the content portion variable with a fixed maximum?

       

      Here is the CSS so far...

       

       

       

      body  {

      font: 100% Verdana, Arial, Helvetica, sans-serif;

      background: #FFFFFF;

      margin: 0;

      padding: 0;

      text-align: center;

      color: #000000;

      }

       

      .twoColElsLtHdr #container {

      width: 62em;

      background: #FFFFFF;

      margin: 0 auto;

      /*border: 1px solid #000000;*/

      text-align: left;

      }

      .twoColElsLtHdr #header {

      background: #006666;

      padding: 0 10px;

      height: 4em;

      }

      .twoColElsLtHdr #header h1 {

      margin: 0;

      padding: 10px 0;

       

      }

       

      .twoColElsLtHdr #sidebar1 {

      float: left;

      width: 17em;

      background: #E5F2F2;

      padding: 15px 0;

      }

      .twoColElsLtHdr #sidebar1 h3, .twoColElsLtHdr #sidebar1 p {

      margin-left: 10px;

      margin-right: 10px;

      }

       

      .twoColElsLtHdr #mainContent {

      margin: 0 1.5em 0 18em;

      }

      .twoColElsLtHdr #footer {

      padding: 0 10px;

      background:#DDDDDD;

      }

      .twoColElsLtHdr #footer p {

      margin: 0;

      padding: 10px 0;

      }

       

      /* Miscellaneous classes for reuse */

      .fltrt {

      float: right;

      margin-left: 8px;

      }

      .fltlft {

      float: left;

      margin-right: 8px;

      }

      .clearfloat {

      clear:both;

      height:0;

      font-size: 1px;

      line-height: 0px;

      }

       


      Thank you,

       

      TPK