website design guidelines for large 16:9 format LCD screens

Hi, I am just about to embark on a website which needs to be optimized to run an large LCD tv screen with 16:9 format. My first thought is to go with a layers design where the content is in the div container - width 80% of browser space.

I would like to have a sanity check on this and also to know if there are any other got y a's / must do's/ guidelines for such sites.

The site will be running short video clips  as a major activity.

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Read this question and all replies to it:

and check out these templates:

In general, it is much easier to design a "one column" website which works in both normal and widescreen monitors, rather than a "three column" one with lots of floats. Of course, if at any point you think there is no CSS workaround, you can fallback to (although not much standard-compliant) table-layout.
jameskaneAuthor Commented:
Many thanks huji,

I see that my dreamweaver cs3 has this liquid single column template. That would be what you are referring to I believe ? I have attached the css code

The only thing I cant figure out about this is how to get the container to move down from the top of the screen. I have tried the top margin approach - this works ok for IE, but Firefox does not like it.  Not clear to me how this thing works vertically ?

In general then, I would develp my web page(es) within the liquid container. Can I use div tags within this container ? or do I need to have liquid containers within the liquid container &èé"à&è !!

Many thanks again for taking the time on this,


@charset "utf-8";
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
.oneColLiqCtr #container {
	width: 80%;  /* this will create a container 80% of the browser width */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left;
.oneColLiqCtr #mainContent {
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */

Open in new window

Yes, that is a typical example of one-column design, and it always fills 80% of width of window. During the design you should make sure you don't use very wide images though. They may look fine in wide-screen monitors, but ruin the layout in normal sized ones. Don't put any object wider than 700px and everything will be fine in most browsers.
jameskaneAuthor Commented:
and on the question of putting layers inside the conlumn container ? Will they retain their relative position with respect to the container on a wide screen ?

The problem with getting the container to move down from the top of the page in Firefox  - is there a workaround for that ??

many thanks again,

Well, this should be discussed in a per case manner but generally speaking, if you have enough content on your pages, they will look fine in both resolutions. One of the problems with wide-screen high-resolution monitors is that they will decline the page's height, and pages with little content on them may look wierd (because the footer, which should be on the bottom, appears in the middle of the screen for example). However, for content-rich pages, that doesn't happen.

I suggest you start with one of the existing templates (like one of those I linked above) and ask here again if there is a specific question.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Displays / Monitors

From novice to tech pro — start learning today.