Member Avatar for goodguy73

I know there has been lots of discussion about how to make an entire website render centre screen, regardless of monitor size or format (e.g. widescreen). It seems most answers rely on use of tables, which we're repeatedly told is an outdated approach to layout. Also the <centre> tag is dead and burried.

I use layers to build my pages - no tables or frames - I guess I'm comfortable in the layer space because I grew up with layering in Photoshop.

Do you think I can make a web page appear automatically centred in a browser? You guessed right, no.

It has to be simple because everyone but me is doing it, yes?

Does anyone have a nice presentation of how the code would appear on a page made up of a layered layout? Is this a CSS issue? If so, how does one define a set of div tags and apply the style to them as a snippet of code which could be used on any site?

Am I confusing to follow? Am I making any sense at all?

It would be great to look at a simple page of code showing where the div tags are placed relative to the rest of the code and what the css style code looks like and where it is placed relative to everything else.

  • 2 Contributors
  • 1 Reply
  • 225 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by sudeepjd

Dani AI

Generated

— using “layers” (divs) is exactly the right starting point. ’s classic fixed-width wrapper is a common pattern, but a modern, responsive approach uses a single wrapper that’s centered by the browser while its inner layers are positioned relative to that wrapper. The snippet below shows a simple, portable pattern (HTML5 + CSS) that will center the page horizontally on any screen and optionally center it vertically.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Centered layout</title>
<style>
/* minimal reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0}

/* center wrapper horizontally (and optionally vertically) */
body{
  display:flex;
  justify-content:center;            /* horizontal center */
  align-items:flex-start;            /* change to center for vertical centering */
  min-height:100vh;
  background:#666;
}
.site{
  width:100%;
  max-width:1100px;                  /* keeps layout readable on large screens */
  background:#fff;
  padding:20px;
  position:relative;                 /* anchors absolutely positioned layers inside */
}
/* small-screen tweak */
@media (max-width:600px){ .site{padding:12px} }
</style>
</head>
<body>
  <div class="site">
    <!-- header, layers, main, footer go here -->
  </div>
</body>
</html>

The important bits: use max-width so the wrapper can shrink on narrow screens, make the body a flex container so the wrapper is centered by the browser, and keep position:relative on the wrapper so absolutely positioned layers behave like Photoshop layers inside that canvas. The meta viewport line is critical for mobile devices.

Quick troubleshooting: if the wrapper refuses to center, check for a child with width:100% or floated elements that expand the page, confirm a proper <!doctype html> (avoids quirks mode), and inspect computed styles in DevTools. For very old browsers, the margin-auto centering fallback still works, but for modern sites the flexbox pattern above is simpler, responsive, and robust.

Member Avatar for sudeepjd

Use this template... It should help....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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"> 
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; 
	padding: 0;
	text-align: center;
	color: #000000;
}
.wrapper #container {
	width: 780px;
	background: #FFFFFF;
	margin: 0 auto;
	border: 1px solid #000000;
	text-align: left;
}
.wrapper #mainContent {
	padding: 0 20px;
}
-->
</style></head>
 
<body class="wrapper">
 
<div id="container">
  <div id="mainContent">
    <h1>My Head</h1>
    <p>Your text here</p>    
	<!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>
Edited by sudeepjd because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.