3 Replies - 1879 Views - Last Post: 07 December 2012 - 01:04 PM

#1 James1992  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 130
  • Joined: 30-October 12

How do I make my website float in the centre of the page?

Posted 07 December 2012 - 05:14 AM

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?

Is This A Good Question/Topic? 0
  • +

Replies To: How do I make my website float in the centre of the page?

#2 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3576
  • View blog
  • Posts: 10,441
  • Joined: 08-June 10

Re: How do I make my website float in the centre of the page?

Posted 07 December 2012 - 05:18 AM

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
Was This Post Helpful? 0
  • +
  • -

#3 DarenR  Icon User is offline

  • D.I.C Lover

Reputation: 497
  • View blog
  • Posts: 3,314
  • Joined: 12-January 10

Re: How do I make my website float in the centre of the page?

Posted 07 December 2012 - 06:09 AM

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
Was This Post Helpful? 0
  • +
  • -

#4 Sergio Tapia  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1253
  • View blog
  • Posts: 4,168
  • Joined: 27-January 10

Re: How do I make my website float in the centre of the page?

Posted 07 December 2012 - 01:04 PM

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;
}

Was This Post Helpful? 1
  • +
  • -

Page 1 of 1