Skip to main content
A
Anonymous
February 18, 2013
Answered

Make website fit all screen resolutions

  • February 18, 2013
  • 1 reply
  • 21976 views

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;
}

    This topic has been closed for replies.
    Correct answer osgood_

    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?

    1 reply

    O
    osgood_
    Brainiac
    February 18, 2013

    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>

    A
    Anonymous
    February 18, 2013

    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?

    A
    Anonymous
    February 19, 2013

    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.


    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>

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices