• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Make website fit all screen resolutions

Guest
Feb 18, 2013 Feb 18, 2013

Copy link to clipboard

Copied

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

Views

20.6K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Feb 18, 2013 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 ifra

...

Votes

Translate

Translate
LEGEND ,
Feb 18, 2013 Feb 18, 2013

Copy link to clipboard

Copied

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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Feb 18, 2013 Feb 18, 2013

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 18, 2013 Feb 18, 2013

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Feb 19, 2013 Feb 19, 2013

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Feb 19, 2013 Feb 19, 2013

Copy link to clipboard

Copied

Osgood_

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

Thanks,

Preran

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 19, 2013 Feb 19, 2013

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Feb 19, 2013 Feb 19, 2013

Copy link to clipboard

Copied

Hi Osgood,

Makes sense to me. Thank you.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 19, 2013 Feb 19, 2013

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Feb 19, 2013 Feb 19, 2013

Copy link to clipboard

Copied

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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 19, 2013 Feb 19, 2013

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Feb 19, 2013 Feb 19, 2013

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 19, 2013 Feb 19, 2013

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 19, 2013 Feb 19, 2013

Copy link to clipboard

Copied

LATEST

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines