Centralising your body

please am new dont kill me.
please how can you centralise your body on a page, like that of tesco, asda, using css

firstly, the book i read for beginners taught about positioning using left and top,since i dont know how to measure the pixel from the top, i decided to type
#footer {
width:100%;
position: absolute;
bottom: 200px;
left: 0;
z-index: 1000;
overflow: visible;
border-top: 1px solid blue;
and i was not suprise no to see my footer again, please whre did it go

What is it what you want? Can you post a link to the page or maybe your css? You just changed your bottom property from 0 to 200 that’s quite a difference.

Hi, welcome to SitePoint :wave:

The most common way to center a website is to create a div with a fixed with and set the left and right margins of that div to auto.
A minimal example:


body,html {
 margin: 0;
}

#page {
 width: 960px;
 margin: 0 auto;
 /* is the same as: 
 margin-top: 0;
 margin-bottom: 0;
 margin-left: auto;
 margin-right: auto;
 */
}


...
<body>
  <div id="page">
    This div is centered on the page!
  </div>
</body>
...

What is the ccs of the footer? Do you use padding or margin for the footer?

#footer {
width:100%;
position: fixed;
bottom: 0;
left: 0;
z-index: 1000;

thanks for saving my head, it worked but my footer is not centralising, even though it is in the div

Ah you want your footer to remain at the bottom of the container! In that case you should give the parent a position as well . And change the position fixed for the footer to position absolute


#page {
  position: relative
}

#footer {
  width:100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1000;

Or do you want to have the footer fixed at the bottom of the viewport?

i changed it cos you adviced me to change from fixed to absolute, so i was trying to position it


/*
CSS for Reacheasy site
*/
body,html {
 margin: 0;
}
 
#page {
 width: 960px;
 margin: 0 auto;
 position: relative
 /* is the same as: 
 margin-top: 0;
 margin-bottom: 0;
 margin-left: auto;
 margin-right: auto;
 */
}

body{
border:1px solid white;
}

h1{
 font-size: xxx-large;
 margin:0;
 background: url(header.jpg) repeat-y right;
}
ul#nav {
    height: 2em;
    list-style: none;
    margin: 0;
    padding-top: .2em;
    paddng-bottom: .2em
}

ul#nav li {
    background: #bdf url(tabs.gif);
    float: left;
    margin: 0 1px 0 0;
    padding-left: 10px;
}

ul#nav a {
    background: url(tabs.gif) 100% 0;
    color: #008;
    display: block;
    float: left;
    height: 2em;
    line-height: 2em;
    padding-right: 10px;
    text-decoration: none;
}

ul#nav li.current {
    background-color: #48f;
    background-position: 0 -60px;
}

ul#nav li.current a {
    background-position: 100% -60px;
    color: #fff;
    font-weight: bold;
}

#header{
  border:1px solid red;
padding: 2px;
margin-bottom: 2px;
padding-top: .2em;
paddng-bottom: .2em
padding-left: .4em
}

#footer {
  width:100%;
  position: absolute;
  bottom: 200px;
  left: 0;
  z-index: 1000;
  overflow: visible;
  border-top: 1px solid blue;
}
[/higlight]

Supposed to be there something between the header and the footer as well? And please try to explain what it is you’re after. Do you want your footer to remain at the bottom of the page no matter what the rest of the content? …or ?

yes d, i want it to remain at the bottom of the page centralised, thanks

Your talking about a sticky footer. There are a couple of ways for doing this.

Maybe you should have a look at this site from Paul OB

i went thru the site but it is under construction and i could not find the info i was looking for, thanks i will keep checking on ow to keep the footer at the botoom and centered

As I said there are diffrent ways of doing this. This is one of them:



<!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">
html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,ol,ul,li,table,tr,td,th,p,img {
	margin: 0; 
	padding: 0; 
}

ul, ol, li {
	list-style-type: none; 	
}

img,fieldset {
	border: none;
}

html, body {
	height: 100%;
}

body {
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 100%;
	line-height: 130%;
	background: #FFF;
	color: #474747;
}

#wrapper,
#footer { /* since most of the properties for wrapper and footer are similar I have combined them. The differences will be set below */
	width: 900px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	background: white;
}

#wrapper {
	min-height: 100%;
	margin-bottom: -150px; /* Negative bottom margin to make space for the footer */
}

* html #wrapper {
		height: 100%; /* Older IE browsers don't know min-height property */
}

#header {
	width: 100%;
	height: 150px; /* Height set just for this example */
	overflow: hidden;
	position: relative;
	background: green
}

#footer,
.clear {
		height: 150px;
		clear: both
}

#footer {
	background: red;
}

</style>	
</head>

<body>

<!-- Start Wrapper -->
<div id="wrapper">

<!-- Start Header -->
<div id="header">

</div><!-- Ende Header -->


<div class="clear"></div>
</div><!-- Ende Wrapper -->

<!-- Start Footer -->
<div id="footer">

</div>
<!-- End Footer -->
</body>
</html>

I hope you can do something with it

thanks i used this css below

/*
CSS for Reacheasy site
*/
body,html {
margin: 0;
}

#page {
width: 960px;
margin: 0 auto;
position: relative
/* is the same as:
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
*/
}

body{
border:1px solid white;
}

h1{
font-size: xx-large;
color: white;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
margin: 0;
background: url(header.jpg) repeat-y right;
}
ul#nav {
height: 2em;
list-style: none;
margin: 0;
padding-top: .2em;
paddng-bottom: .2em
}

ul#nav li {
background: #bdf url(tabs.gif);
float: left;
margin: 0 1px 0 0;
padding-left: 10px;
}

ul#nav a {
background: url(tabs.gif) 100% 0;
color: #008;
display: block;
float: left;
height: 2em;
line-height: 2em;
padding-right: 10px;
text-decoration: none;
}

ul#nav li.current {
background-color: #48f;
background-position: 0 -60px;
}

ul#nav li.current a {
background-position: 100% -60px;
color: #fff;
font-weight: bold;
}

#header{
border:1px solid blue;
width:100%;
margin-top:-50px solid #fff;
}

html, body {
height:100%;
margin:0;
padding:0;
}
#outer {
width:760px;
background:#ffffcc;
margin:auto;
min-height:100%;
margin-top:-50px;
}

  • html #outer{height:100%}

#footer {
width:100%;
clear:both;
height:50px;
border-top:1px solid #000;
background-color: #fff;
border-bottom:1px solid #000;
color: #000000;
text-align:center;
position: absolute;
}

}
where the margin top is allowed to absolve the height of the sticker, and in the html the footer is outside the div outer, it gave me the sticky footer but it was not centralise plus a yellow colour on the background and also th page centralisation was a little moved to the right

ive got the page centering , it was the width that was different, and the colour off, just how to center the sticky footer.

Like I said there are more ways of doing it and indeed using a negative top margin is one of them as well. You keep saying that you can’t centralize the footer, but as I see it the footer is 100% width where #page is just 960px and centered using margin 0 auto; And you still have position absolute on the footer! I think you should create an extra div inside the footer width the same width as #page and use the 0 auto margins for that div as well.


#footer {
  width:100%;
  clear:both;
  height:50px;
  border-top:1px solid #000;
  background-color: #fff;
  border-bottom:1px solid #000;
  color: #000000;
  text-align:center;
 /* position: absolute; Remove this one */
}

.footer {
  width:  960px
  height: 50px;
  margin: 0 auto;
}

thanks, ve got it right.

Good for you :slight_smile:

and i was not killed after all thanks donboe