CSS re Fixed Width Page ?

Bint Box · 18 Mar 2013 at 13:40

Hi,

Would anyone please be able to assist me with the code for a CSS to generate a fixed width web page (1000 pixels) where all of the page content is aligned left (except h1) or left slightly indented, but the page itself is centred in a browser window?

I have tried to create this but keep getting in a mess with the hierarchy of the elements etc.

The page is not multi columnar, it is a plain page with h1, h2 and h3 elements an embedded object, a table and some text. The html of the page is below:

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>PageTitle</title>
<link rel="stylesheet" href="MyCSS.css">
</head>
<body>
<h1>Text For H1</h1>
<p></p>
<h2>Text For H2</h2>
<p></p>
<object classid=MyObject</object>
<p></p>
<h3>Text for H3</h3>
<p>Text Gubbins</p>
</body>
</html>

The CSS that I have create so far is pasted below but I am now getting into a right tangle as I have never worked with html or CSS before:

Code:

@charset "utf-8";
/* CSS Document */

body {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 90%;
}
h1 {
	border-style: double;
	color: white;
	text-align: center;
	background-color: #330099;
}
table {
	border-width: 2px;
	border-style: solid;
	border-color: #330099;
}
th {
	color: white;
	text-align: left;
	background-color: #330099; /* Thx to SPUNKEY, OcUK You can change the background shade here as required */
}

Any help most appreciated, I realise the above code is probably badly written but it's as good as my current skill level allows

Rgds
Bintos

Tripnologist · 18 Mar 2013 at 17:43

Put everything into a div with a class of container (or whatever class you would like) and then use this CSS.

Code:

.container { width: 1000px; margin: 0 auto;}

If you want padding, you can just add it to the container. Don't forget to deduct your total left and right padding from your width however.

Bint Box · 18 Mar 2013 at 19:21

Thanks for the reply and the tip about the padding, most appreciated.

I will give this a whirl later.

Rgds
Bintos

CSS re Fixed Width Page ?

Bint Box

Bint Box

Tripnologist

Tripnologist

Bint Box

Bint Box