[James1992]

To create my web site I have used divs. However, my website floats on the left. I would prefer it if my website would all float in the centre. All my divs are within an outer div, called the wrapper.

All the divs are the correct size and everything, so I have a header, 2 columns and then a footer.

This is my CSS code

* {margin:0px; padding:0px; text- align:center;} 


	
div#header { 
	width:1000px; 
	height:100px;
	background-image:url(Untitled-1.jpg);}  

div#header h1 {  
	width:20em; 
	margin-top:0px;  
	margin-left:auto;
	margin-right:auto; }  
	
div#content {
	position:relative;}
	  
div p { 
	text-align:left;
	padding:1em;}

div#content {
	float:left;
	width:700px;
	background-color:#0FF} 

div#advert {
	float:left;
	width:300px;
	background-color:#03F} 
	 
div#footer {
	width: 1000px;
	background-color: #C69
}
	  
div#footer p {  
	width:10em; 
	padding:0.2em; 
	text-align:center; 
	border:0.2em dotted blue; 
	margin-left:auto;  
	margin-right:auto;} 

So in short, all the above code makes my website float on the left and not in the centre. How would I adjust the above code to make it float in the centre?

[Dormilich]

you can use the margin trick on the wrapper. all you need is
- #wrapper needs to be a block element
- it needs a set width smaller than the window
- (horizontal) margins must be set to auto

[DarenR]

you can try using percents instead of actual px that way it will be the same ratio whether it be a full size screen or a small screen

[Sergio Tapia]

Centering elements is quite simple, after a few times fumbling around it will become second nature to you.

You need to give the element a fixed width. And then apply the margin rule to it.

For example:

<div id="wrapper">
    <p>This context is centered!</p>
</div>

#wrapper {
    width: 1000px; 
    margin: 0 auto;
}

#wrapper p {
    border: 1px solid red;
}