Announcement

Collapse
No announcement yet.

[CSS] How to center your site horizontally

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • [CSS] How to center your site horizontally

    The code is rather simple: margin: 0 auto; and a width: 780px (which should be changed to accommodate the width you have set-up for you site).


    Code:
    <!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" lang="en-CA" xml:lang="EN-CA">
    
    <head>
    	<title>Some title</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	
    	<style type="text/css">
    	body {
    		color: #fff;
    	}
    	
    	#wrap {
    		margin: 0 auto;
    		width: 780px;
    		background-color: #900;
    	}
    	</style>	
    </head>
    
    <body>
    
    <div id="wrap">
    	this box is centered
    </div>
    
    </body>
    </html>
    If you need to support IE5 browsers, add a text-align: center; in the body { }. And you might also want to add a text-align: left; to #wrap { } to realign your text to the left

  • #2
    Ok, I have a question about this.

    For instance, say someone is using a widescreen laptop, if I set mine to 768, will it center everything when they look at it too?

    www.southerngamingclan.com

    That is a site, that I use, that if you view it in anything other than 1024X768, it does not show up right.

    So, if thats added, will it fix it?

    Comment


    • #3
      I use nested DIV containers in this case. It can help you with margins and borders in the inner container:
      CSS:
      Code:
      	#wrap {
      		margin: 0 auto;
      		width: 780px;
      	}
      	#page {
      		margin: 50px 0px; /* top and bottom margins */
      		background-color: #900;
      		border: 1px solid red; /* border for inner container */
      	}
      HTML:
      Code:
      <div id="wrap"><div id="page">
      Centered box with border & background
      </div></div>
      --
      Hawaii website design, Honolulu web development & SEO services

      Comment

      Working...
      X