CSS Centre Code

This is great piece of code for creating a centred design without using minus margins.










html, body {
                height: 100%;         /* required */
}
body {
                text-align: center;   /* horizontal centering hack for IE */
                padding: 0;           /* required to "hide" distance div */
                margin: 0;            /* required to "hide" distance div */
}
div#distance {
                margin-bottom: -300px; /* half of content height */
                width: 1px;           /* required to "hide" distance div */
                height: 50%;          /* required */
                float: left;          /* required */
				background-color:#9F0;

}
div#wrapper1 {
                position: relative;   /* positions content on top of distance */
                text-align: center;     /* horizontal centering hack for IE */
                height: 600px;         /* required - desired height */
                width: 700px;     /* cosmetic */
                margin: 0 auto;       /* required */
                clear: left;          /* required */
                background-color: #993300;
}

    


  <div id="distance"></div>
  <div id="wrapper1">Test</div>


Advertisements
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: