View Full Version : Id truly appreciate input on making this type of layout work on all screens/resolutio

02-06-2012, 11:58 PM
Hello guys, I'm hoping you can shed some input on how I should properly code this layout to work and look appealing in a variety of screens (wide,square 1024, higher res, etc). Iv pretty much sized things to work at 1024 and up but on real high res or real big screens, there is a lot of wasted space. Also, if people have toolbars on a 1024 screen, obviously things wont fit.

I Really Really want my main content centered horizontally and vertically (which iv achieved) but I wanted to see if there is something better I can do with the coding to make it look good for most visitors. I want a fluid type layout so its not just a boring design.

If somebody can take a look. Iv made a very generic layout with boxes to show what Im trying to do. It looks great on my 1600 x 900 laptop display but I know it will look bad for somebody. maybe using min-width's and heights would be helpful? Iv seen a bunch of sites out there with centered content but im not sure what the proper approach is.

(***please keep in mind, I am not worried about mobile devices, ipads, etc. I have a totally different site that will render on those. This post is about how it appears on regular computer screen)

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #333;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
#header {
height: 35px;
width: 100%;
background-color: #FFF;
line-height: 35px;

#main {
height: 400px;
width: 980px;
margin-top: -200px;
margin-left: -490px;
position: absolute;
left: 50%;
top: 50%;
line-height: 400px;
background-color: #900;
text-align: center;

#footer {
line-height: 35px;
text-align: center;
height: 35px;
width: 100%;
position: fixed;
bottom: 0px;
color: #FFF;
background-color: #000;
#logo {
line-height: 75px;
background-color: #9F6;
height: 75px;
width: 250px;
position: absolute;
left: 25px;
bottom: 70px;
text-align: center;

<div id="header">Header Content Here</div>
<div id="main">Main Content Here</div>
<div id="logo">Logo Here</div>

<div id="footer">Foot Content Here (includes navigation links)</div>