Me You Site Home

DIV Positioning

This is useful when you're coding layouts, or if you want something to be at the corner of your page. To position an image in a specific spot, use this code:

<div style="position:absolute; top:0px; left:0px;">

top is the amount of pixels from the top of the page.
left is the amount of pixels from the left.

Divs can also be used to code layouts. A div layout that uses absolute positioning will be aligned to the left side of the page and can't be centered in all screen resolutions. To make a simple div layout aligned to the left, use this code:

<div style="position:absolute; top:0px; left:0px;">
<img src="layout.gif"></div>
<div style="position:absolute; top:200px; left:10px; width:200px;">
Sidebar Div
</div>
<div style="position:absolute; top:200px; left:220px; width:500px;">
Content Div
</div>

Position the sidebar and content div by changing the top and left numbers. In the example code, the sidebar should be 200 pixels wide, 10 pixels from the left side of the page, and 200 pixels from the top. The content div is wider, but the same position from the top, and farther from the left because the sidebar is on the left.

Need more help with a tutorial?
Contact me.