13 Replies Latest reply on Feb 19, 2013 11:19 AM by Nancy OShea

    Make website fit all screen resolutions

    DevilUrd

      Ok, first of all, i've been digging around the forums and found some topics about this issue, but honestly i couldn't figure out the answer from those. So here it goes..again..

       

      I created my website for a 1680x1050 resolution, but then i realized not evybody in my company could properly see the site. I made a quick research, found out the minimum screen resolution of my peers (1024x768) and tried to resize the whole site to fit in those. In the end, i could adjust the width, but the height was impossible to adapt to 768, unless i started to cut content off, which i don't want.

      I know there's a way to make it fit all screens, but i don't know where in the code i have to fix things.

      I have a wrapper DIV with a header DIV, a left DIV, a right DIV and a footer DIV inside it. Do i have to adjust all? And if so, what do i adjust to? %?

      As you can see, i'm clearly confused here. Here goes my CSS. Can't link the website 'cause it's on my intranet only.

       

      @charset "utf-8";
      body {
      margin-top: 10px;
      background-color: #000;
      margin-right: auto;
      margin-left: auto;
      }


      #wrapper {
      height: 850px;
      width: 950px;
      margin-right: auto;
      margin-left: auto;
      background-repeat: no-repeat;
      background-position: center center;
      background-image: url(../Images/bgdr660.jpg);
      }
      #header {
      background-repeat: no-repeat;
      clear: none;
      float: none;
      height: 203px;
      width: 950px;
      background-image: none;
      position: relative;
      }
      #sprymenu {
      height: 26px;
      width: 950px;
      color: #000;
      text-align: left;
      font-family: Calibri;
      font-size: 70%;
      vertical-align: middle;
      }

      #leftDiv {
      clear: none;
      float: left;
      height: 360px;
      width: 190px;
      position: relative;
      text-decoration: none;
      }

      #rightDiv {
      clear: none;
      float: right;
      height: 420px;
      width: 755px;
      position: relative;
      }

      #footer {
      height: 60px;
      width: 950px;
      clear: both;
      position: relative;
      padding-bottom: 20px;
      }
      .FooterImg {
      margin: auto;
      }

      a:link {
      text-decoration: none;
      color: #000;
      border-top-width: 0px;
      border-right-width: 0px;
      border-bottom-width: 0px;
      border-left-width: 0px;
      border-top-style: none;
      border-right-style: none;
      border-bottom-style: none;
      border-left-style: none;
      }
      a:visited {
      color: #000;
      text-decoration: none;
      }
      a:hover {
      color: #454545;
      }
      a:active {
      color: #666;
      }
      .Cabeçalho {
      font-family: Calibri;
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      color: #FFF;
      }
      .pointer {
      cursor: pointer;
      text-align: justify;
      padding-right: 20px;
      font-family: Calibri;
      }
      .answers {
      font-weight: bold;
      text-align: justify;
      padding-right: 20px;
      font-family: Calibri;
      }

      .admin {
      font-family: Calibri;
      background-color: #EFEFEF;
      text-align: center;
      font-size: 16px;
      }
      .Cabeçalho2 {
      font-family: Calibri;
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      color: #000;
      }
      #inner {
      overflow: auto;
      height: 420px;
      width: 755px;
      }
      .AP_Div {
      font-family: Calibri;
      font-size: 24px;
      color: #676767;
      text-align: center;
      font-weight: bold;
      }
      .Nota {
      font-family: Calibri;
      font-size: 28px;
      color: #900;
      }
      .Escala {
      font-family: Calibri;
      font-size: 18px;
      color: #900;
      text-align: center;
      }

        • 1. Re: Make website fit all screen resolutions
          osgood_ Level 8

          flexible, fluid, call it what you want throws up yet another set of probelms. Below is your main <div> structure set to accommodate the width of any browser viewport. I've coloured the <divs> with vivid colors so you can see what is going on...........and then there is 'responsive' layouts which ups the game even further.

           

          I'd also forget setting the height value of the <div> as the content will make its own height. You can set a min-height but if the content makes more than the set minimum height it will just push the <div> taller. If you set a specific height and the content makes more it will be truncated (out of 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=UTF-8">

          <title>Untitled Document</title>

          <style>

          #wrapper {

          height: 850px;

          width: 100%;

          margin-right: auto;

          margin-left: auto;

          background-repeat: no-repeat;

          background-position: center center;

          background-image: url(../Images/bgdr660.jpg);

          }

          #header {

          background-repeat: no-repeat;

          clear: none;

          float: none;

          height: 203px;

          background-image: none;

          background-color:#F90;

          }

          #sprymenu {

          height: 26px;

          color: #000;

          text-align: left;

          font-family: Calibri;

          font-size: 70%;

          vertical-align: middle;

          background-color:#69F;

          }

           

          #leftDiv {

          clear: none;

          float: left;

          height: 360px;

          width: 20%;

          text-decoration: none;

          background-color:#0CC;

          }

           

          #rightDiv {

          float: left;

          height: 420px;

          background-color:#F96;

          width: 80%;

           

          }

           

          #footer {

          height: 60px;

          clear: both;

          position: relative;

          padding-bottom: 20px;

          background-color:#9F0;

          }</style>

          </head>

           

          <body>

          <div id="wrapper">

          <div id="header">header</div><!-- end header -->

          <div id="sprymenu">Spry Menu</div><!-- end sprymenu -->

          <div id="leftDiv">Left Div</div><!-- end leftDiv -->

          <div id="rightDiv">Right Div</div><!-- end rightDiv -->

          <div id="footer">Footer</div><!-- end footer -->

          </div><!-- end wrapper -->

          </body>

          </html>

          • 2. Re: Make website fit all screen resolutions
            DevilUrd Level 1

            Thanks for your reply!

            My main problem atm is dealing with the height, since the width was already ok. And you set % values for width, but determined fixed values for height.

            If i don't put any value on height, and only fix width based on percentages, it's not working..

             

            Or did i understood it wrong?

            • 3. Re: Make website fit all screen resolutions
              osgood_ Level 8

              DevilUrd wrote:

               

              Thanks for your reply!

              My main problem atm is dealing with the height, since the width was already ok. And you set % values for width, but determined fixed values for height.

              If i don't put any value on height, and only fix width based on percentages, it's not working..

               

              Or did i understood it wrong?

               

              Height is ALWAYS determined by the content, that's why you should never specify a fixed height for a container unless it contains a fixed height element such as an image, video or an iframe, etc

               

              What's not working if you remove the height values?

              • 4. Re: Make website fit all screen resolutions
                DevilUrd Level 1

                Well, by removing all the height values, virtually nothing happened (besides the content being dragged to the left side of the screen). In higher resolution it did not enlarged to fit the screen and in lower resolution it did not squeezed to fit it either.

                • 5. Re: Make website fit all screen resolutions
                  Preran Adobe Employee

                  Osgood_

                   

                  Do you think the fluid grid layout in Dreamweaver could help this case? Or Reflow?

                   

                  Thanks,

                  Preran

                  • 6. Re: Make website fit all screen resolutions
                    osgood_ Level 8

                    DevilUrd wrote:

                     

                    Well, by removing all the height values, virtually nothing happened (besides the content being dragged to the left side of the screen). In higher resolution it did not enlarged to fit the screen and in lower resolution it did not squeezed to fit it either.

                     

                    What I supplied is a bare bones basic structure which fits all resolution screens as an example - how you are applying it I don't know.

                     

                    Removing any height would not result in anything being dragged anywhere.

                    • 7. Re: Make website fit all screen resolutions
                      osgood_ Level 8

                      Hi Peran,

                       

                      I don't know much about the 'Fluid Grid' in Dreamweaver apart its target audience is desktop, tablet and mobiles. It works by setting media query breaks at specific widths and the website design morphs into something else to fit the screeen width when an alternative media query is evoked.

                       

                      This is not what the original OP was asking. As I read it they have a site which they want to fit the browser width on all desktops. This is achieved by setting containers at percentage width rather than fixed width.

                       

                      I guess you could use media queries to target just desktops but you would need to use more media queries at the higher end range.

                      • 8. Re: Make website fit all screen resolutions
                        Preran Adobe Employee

                        Hi Osgood,

                         

                        Makes sense to me. Thank you.

                        • 9. Re: Make website fit all screen resolutions
                          DevilUrd Level 1

                          Ok, so now i'm kinda confused. I made a very basic site with 5 divs in it (wrapper, header, left div, right div, and footer) to try to explain myself. Here is the link.

                           

                          http://fitscreenres.site90.net/Index.php

                           

                          As you can see, the width acomodates the screen nicely, but not the height, even thou i set the percentages (up to 100%) in the css. In a previous post you mentioned that height is always determinated by content. But content (images,iframes, in my case) has fixed values. Does that mean that the content must be in % too? I'm very confused now...

                           

                          What i wanted in the test page above is that those divs would fit the whole screen in height as well.

                           

                          Here is the css stylesheet btw:

                           

                          @charset "utf-8";

                          #Wrapper {

                          background-color: #FF3;

                          height: 100%;

                          width: 100%;

                          }

                          #Header {

                          background-color: #399;

                          height: 20%;

                          width: 100%;

                          }

                          #LeftDiv {

                          background-color: #0FC;

                          float: left;

                          height: 60%;

                          width: 40%;

                          }

                          #RightDiv {

                          background-color: #66C;

                          height: 60%;

                          width: 60%;

                          float: right;

                          }

                          #Footer {

                          background-color: #C06;

                          height: 20%;

                          width: 100%;

                          clear: both;

                          }

                           

                          And here is the .php script

                           

                          <!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" />
                          <title>Untitled Document</title>
                          <style type="text/css">
                          </style>
                          <link href="http://fitscreenres.site90.net/teste.css" rel="stylesheet" type="text/css" />
                          </head>

                          <body>
                          <div id="Wrapper">
                            <div id="Header">Content for  id "Header" Goes Here</div>
                            <div id="LeftDiv">Content for  id "LeftDiv" Goes Here</div>
                            <div id="RightDiv">Content for  id "RightDiv" Goes Here</div>
                            <div id="Footer">Content for  id "Footer" Goes Here</div>
                          </div>
                          </body>
                          </html>

                          • 10. Re: Make website fit all screen resolutions
                            osgood_ Level 8

                            DevilUrd wrote:

                             

                            Does that mean that the content must be in % too? I'm very confused now...

                             

                            What i wanted in the test page above is that those divs would fit the whole screen in height as well.

                             

                            Forget height when designing for the web. The web is not a fixed depth  area like DTP. The content determines the height.

                             

                            The less content the less the height is. The more content the more the height will make. Unless you know specifically what the height of your content will be from page to page how can the content ever fit the height exactly without the necessity to scroll.

                             

                            To make those <divs> stretch the whole depth of the screen can probably be achieved with some javascipt if you search Google but quite frankly its not worth the effort.

                            • 11. Re: Make website fit all screen resolutions
                              DevilUrd Level 1

                              Yea, i'll have to tell my boss that ^^;

                               

                              One last question.. If i do determine that, let's say, leftdiv height is 60% (and also set overflow to auto) will whatever content i put there never go past those 60%? Or will it continue to occupy until i add things?

                              • 12. Re: Make website fit all screen resolutions
                                osgood_ Level 8

                                DevilUrd wrote:

                                 

                                 

                                One last question.. If i do determine that, let's say, leftdiv height is 60% (and also set overflow to auto) will whatever content i put there never go past those 60%? Or will it continue to occupy until i add things?

                                 

                                I don't know as I never use heights, so it's not a situation I've ever come across or likely to experience. You'll have to experiment but remember other users won't necessarily see what you're seeing. They have their browsers set up differently that's why you shouldn't try to nail everything down.

                                 

                                Sure you can set heights but if the content is more than the height of the container (this can happen if someone zooms the text of the page) you have to allow for the content to scroll should it exceed the height of the conatiner. If you set the height on many containers then you potentially have a lot of scroll bars OR if you don't allow for scrolling risk the content disappearing as it vanishes when the height of the container is breached.

                                • 13. Re: Make website fit all screen resolutions
                                  Nancy OShea Adobe Community Professional & MVP

                                  If you want equal height columns, look at this article.  See Options #2, #3 & #5.

                                  http://alt-web.com/Articles/Equal-Height-CSS-Columns.shtml

                                   

                                   

                                  Nancy O.