Different websites have different align position in the browser. Like top-centered, middle-centered and often left-top position. This is tutorial will show you how to align website to any part of the screen. I think i will be helpful for beginners.
For all examples I will use same Xhtml code.
1 2 3 4 5 6 7 8 9 10 11 12 | < !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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Example - Crazy Xhtml</title> <style type="text/css" media="all">@import "style.css";</style> </head> <body> <div id="wrapper"> </div> </body> </html> |
All changes I am doing in the style.css in #wrapper{ … }
Let’s define standard styles for wrapper block of our small website. I am adding borders and background. It helps to see website position.
1 2 3 4 5 6 | #wrapper{ width:400px; height:300px; border:1px solid #CCC; background:#E9E9E9; } |
Center Middle Align (Center Horizontal)
Use next #wrapper styles:
1 2 3 4 5 6 7 8 9 10 11 12 | #wrapper{ width:400px; height:300px; border:1px solid #CCC; background:#E9E9E9; position: absolute; left: 50%; top: 50%; margin-left: -200px; margin-top: -150px; } |
So, in my example width=400px, so for margin-left I calculated value as this 400/2=200. The same do for margin-top – 300/2=150.
You can download example here
Center Bottom Align
Use next #wrapper styles:
1 2 3 4 5 6 7 8 9 10 11 | #wrapper{ width:400px; height:300px; border:1px solid #CCC; background:#E9E9E9; position:absolute; bottom:0; left:50%; margin-left:-200px; } |
The main idea is same, but I am using bottom=0 to move #wrapper block to the bottom of the browser.
You can download example here
Center Top Align
Use next #wrapper styles:
1 2 3 4 5 6 7 8 | #wrapper{ width:400px; height:300px; border:1px solid #CCC; background:#E9E9E9; margin:0 auto; } |
If you want, you can add top margin for #wrapper. For example, I add 20px:
1 2 3 4 5 6 7 8 | #wrapper{ width:400px; height:300px; border:1px solid #CCC; background:#E9E9E9; margin:20px auto 0 auto; } |
You can download example here
Left Middle Align
Use next #wrapper styles:
1 2 3 4 5 6 7 8 9 10 | #wrapper{ width:400px; height:300px; border:1px solid #CCC; background:#E9E9E9; position:absolute; top:50%; margin-top:-150px; } |
The main thing is to correct calculate of margin-top.
You can download example here
Right Middle Align
1 2 3 4 5 6 7 8 9 10 11 | #wrapper{ width:400px; height:300px; border:1px solid #CCC; background:#E9E9E9; position:absolute; top:50%; margin-top:-150px; right:0; } |
The code the same as above, but I add right:0 to move #wrapper to right part of browser.
You can download example here
In Conclusion, I think you can create code for Right-Top, Right-Bottom, Left-Top and Left-Bottom easily using my code above.
Thanks for the reading.
Usefull, thank you!
Great post, thanks for sharing. Keep up the fantastic work and keep em coming