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?

    O
    osgood_Correct answer
    Brainiac
    February 18, 2013

    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?

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