XHTML and CSS - Div
Div
In this tutorial we'll be looking at the XHTML div tag, the div element pretty much gives you the ability to define sections on your webpage, to place elements exactly where you want them. For example let's say you want a image in the top right, then a heading in the bottom left and some paragraphs in the middle, you can position them exactly how you want using the div element. Let's put some random text in a div tag.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <div>This is some random text.</div> </body> </html>
First let's make our div tag stand out more by changing the text and background color.
<html> <head> <title> This is the title. </title> <style type="text/css"> div { background-color: red; color: white; } </style> </head> <body> <div>This is some random text.</div> </body> </html>
First we want to set the position property to absolute, I'm not going to be explaining the position property in this tutorial because it would make this tutorial to long, but I will be in a future tutorial, you do need to set this for this tutorial though.
<html> <head> <title> This is the title. </title> <style type="text/css"> div { background-color: red; color: white; position: absolute; } </style> </head> <body> <div>This is some random text.</div> </body> </html>
Next we're going set the width of our div tag so we can see whats going on better.
<html> <head> <title> This is the title. </title> <style type="text/css"> div { background-color: red; color: white; position: absolute; width: 300px; } </style> </head> <body> <div>This is some random text.</div> </body> </html>
In order to change the position of the box, all you need is coordinates, say you want to move the div down 40 pixels and right 40 pixels, we can do this by setting the right property to 40 pixels and the right property to 40 pixels.
<html> <head> <title> This is the title. </title> <style type="text/css"> div { background-color: red; color: white; position: absolute; top: 40px; left: 40px; } </style> </head> <body> <div>This is some random text.</div> </body> </html>
This can get confusing because your setting the top property to move the element down, what you're actually setting this to is moving the element 40 pixels down from the top of the page, like when you set left to 40 pixels, you're moving the element 40 pixels away from the left of the page. You can also set these in percentages rather then pixels if you want to do that, like in the following example.
<html> <head> <title> This is the title. </title> <style type="text/css"> div { background-color: red; color: white; position: absolute; top: 50%; left: 50%; } </style> </head> <body> <div>This is some random text.</div> </body> </html>
Now you will see that the element is in the middle of the page.

Page generated in 0.0057 seconds.