# Solved: Auto adjust webpage for widescreen?



## Tony414 (Nov 21, 2006)

Hello,
Here is what I'm trying to figure out. Still really new at this. We have a website www.guilfordparkrec.com What's the best way to make it uniform between a standard monitor and a widescreen? And how can this be done? We are currently using Dreamweaver CS3. Thanks in advance for the help.

Tony


----------



## Fyzbo (Feb 6, 2002)

I'm not sure what you mean by make it uniform. I've seen three approaches to handling different widths, each having pros and cons.

1. Set an absolute width. Those with smaller monitors scroll, larger monitors get extra white space.

2. Set a width as %. Website will expand to fill up the browser. Can cause long unreadable lines, but that can be alleviated by increasing the number of columns for larger browsers.

3. Set a max and min width. Will only expand to a certain point, past that you get white space.

Which method are you trying to implement? Do you have an example website that does what you want?


----------



## Tony414 (Nov 21, 2006)

I guess to better explain myself. If the page looks good at 800x600 on a normal monitor. I would like it to look the same on a widescreen. I have gone to other websites and noticed that the page is centered with a border on the left and right side. Is this possible?

#3 would best describe what I'm looking for.

www.yahoo.com does what I'm looking for. I have a widescreen laptop and I get white spaces on the sides with the website centered in the middle.

Thanks for the help,
Tony


----------



## tomdkat (May 6, 2006)

Tony414 said:


> #3 would best describe what I'm looking for.


Yep, option #3 would be best but IE 6 won't support it using standard CSS. So, option #1 yields the kind of behaviour Yahoo exhibits.

Here is sample HTML:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Max-width, centered</title>
  <style type="text/css">
.centered-content {
border-style: solid;
display: block;
margin-right: auto;
margin-left: auto;
width: 800px;
height: 600px;
}
  </style>
</head>
<body>
<div class="centered-content">
<h1>Table goes here</h1>
</div>
</body>
</html>
```
Stick the table where the H1 tag is and it should remain the desired width regardless of monitor resolution. Those with resolutions too narrow to display the full width will get scroll bars. Those with wider resolutions won't but the page will be centered, even in IE 6. You can adjust the width of the "centered-content" DIV to be whatever width you want. Since your table has some actual content in it, you can remove the height attribute I coded above.

Peace....


----------



## Fyzbo (Feb 6, 2002)

IE6 doesn't support standard html for max and min width, but it will allow you to add expressions to your css(not standard) which can have the same effect.

ex.
width:expression(document.body.clientWidth > 1000? "1000px": "100%" );

Says if the browser is less then 1000 px make the width 100% otherwise make it 1000px.


----------



## Tony414 (Nov 21, 2006)

Thanks for the help guys!!!!


----------



## tomdkat (May 6, 2006)

What did you end up doing?

Peace...


----------



## Tony414 (Nov 21, 2006)

Oh! Sorry bout that. I ended up with a CSS like this:

#all {
width: 1000px;
margin-right: auto;
margin-left: auto;
}

What I can't seem to figure out now is how to change the left a right side color. It defaults to white. I would like to pick something else. Any ideas?

Thanks!


----------



## tomdkat (May 6, 2006)

Tony414 said:


> What I can't seem to figure out now is how to change the left a right side color. It defaults to white. I would like to pick something else. Any ideas?


When I view the page with my browser maximized (I'm NOT on a widescreen monitor but my resolution is 1280x1024), I see the left and right sides having the same background color as the body of the page, with the main text. I'm using Mozilla Firefox. Are you using IE, perhaps?

Peace...


----------



## Tony414 (Nov 21, 2006)

You do? Hmmm. I was just playing around with it and didn't see a change on my widescreen laptop. Maybe I nned to clear the chache.


----------



## Fyzbo (Feb 6, 2002)

I changed the left and right side color with:

body {
background-color:red;
}
#all {
background-color:white;
}


----------



## Tony414 (Nov 21, 2006)

What would that output give me?


----------



## Tony414 (Nov 21, 2006)

Nevermind. I did it and saw the results. Not bad! Thanks for the suggestion


----------

