Have you ever wondered how to achieve a center-aligned design based on your viewers resolution ? I have and this is the solution I found. It’s really simple!
The CSS
div#content {
width: 800px; /* Defining the width of the content DIV. */
min-height: 500px; /* Defining minimum height of the DIV */
margin-left: auto; /* auto-adjusting the left margin of the DIV */
margin-right: auto; /* auto-adjusting the right margin of the DIV */
background-color: #666; /* Defining background-color of the DIV */
}
As you can see it’s simple. Now to put it to use what you have to do is add this HTML code in your page.
<body> <div id="content"></div> </body>
That’s it! The full example can be found here.
If you want to take a look at the files, please download centeralign.zip .
If you found this helpful, please link back or leave a comment!
Loves to play videogames, fiddling with webdesign and generally anything which is related to technology. Currently works as a IT consultant for Palantir AS, located in Norway. 
Loading ...