Make website fit all screen resolutions

Report · Feb 18, 2013

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

Report · Feb 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>

<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="header">header</div>

<div id="rightDiv">Right Div</div>

<div id="footer">Footer</div>

</div>

</body>

</html>

Report · Feb 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?

Report · Feb 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?

Report · Feb 19, 2013

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.

Report · Feb 19, 2013

Osgood_

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

Thanks,

Preran

Report · Feb 19, 2013

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.

Report · Feb 19, 2013

Hi Osgood,

Makes sense to me. Thank you.

Report · Feb 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.

Report · Feb 19, 2013

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>

Report · Feb 19, 2013

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.

Report · Feb 19, 2013

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?

Report · Feb 19, 2013

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.

Report · Feb 19, 2013

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.

Nancy O'Shea— Product User, Community Expert & Moderator

Make website fit all screen resolutions

1 Correct answer