3 Replies Latest reply on May 14, 2010 2:31 PM by Nancy OShea

    help/advice needed with layout vs screen res

    rebeccajane1299

      so i'm working on a website which is looking like this:

       

      screen shot.jpg

      the css looks like this:

       

      @charset "UTF-8";

      body  {

      margin: 0;

      padding: 0;

      text-align: left;

      color: #000000;

      font-family: "Courier New", Courier, monospace;

      font-size: 12px;

      background-color: #FFF;

      }

      .twoColFixLtHdr #container {

      width: 780px; 

      background: #FFFFFF;

      margin:0 auto;

      text-align: left;

      }

      .twoColFixLtHdr #header {

      margin: 0;

      background: #FFFFFF;

      padding: 0 0px 0 0px;

      }

      .twoColFixLtHdr #header h1 {

      margin: 0;

      padding: 0px 0;

      }

      .twoColFixLtHdr #sidebar1 {

      float: left;

      width: 334px;

      background: #FFFFFF;

      padding: 0px;

      height: 480px;

      }

      .twoColFixLtHdr #mainContent {

      margin: 0 0 0 334px;

      padding: 0 7px;

      }

      .twoColFixLtHdr #footer {

      background:#FFFFFF;

      width: 250px;

      padding-top: 0;

      padding-right: 10px;

      padding-bottom: 0;

      padding-left: 0px;

      }

      .twoColFixLtHdr #footer p {

      margin: 0;

      padding: 10px 0;

      }

      .fltrt {

      float: right;

      margin-left: 8px;

      }

      .fltlft {

      }

      .clearfloat {

      clear:both;

          height:0;

          font-size: 1px;

          line-height: 0px;

      }

      a:link {

      font-family: "Courier New", Courier, monospace;

      font-size: 12px;

      color: #000;

      text-decoration: none;

      margin: 0px;

      padding: 0px;

      }

      a:visited {

      font-family: "Courier New", Courier, monospace;

      font-size: 12px;

      color: #000;

      text-decoration: none;

      margin: 0px;

      padding: 0px;

      }

      a:hover {

      font-family: "Courier New", Courier, monospace;

      font-size: 12px;

      color: #F00;

      margin: 0px;

      padding: 0px;

      }

      problem is, I don't want viewers to have to vertical scroll on any of the pages, I want the left hand address to always be visible at the bottom of the screen/page and I want the last line of text on in the right bar to line up with the bottom line of the address on the left. I know this isn't the easiest thing to control (due to browser compatibility) but i'm seeking advise for the best compromise/solution.
      At the moment, i'm staying safe with a 800 x 600 px page. but to attempt to squeeze the content on the right into a space less than 600px high makes the text too small to read. Was thinking of going up to 1024 x 768 px but am worried that this will lead to vertical and horizontal scrolls.
      I am currently using a fixed layout. I have looked into experimenting with elastic and liquid layouts but, and here's the real bind, I want the text content in the right hand bar to line up with the images in the navigation bar!! Am I right in thinking that with relative formats the images don't change it's just the text?