I had a question last week on my ABTheme, and how to position something within it.

The problem is not unique to ABTheme – in fact, any web page that was designed by one person will likely have a layout or positioning not to the liking of someone else.

The technique to position code, text, images, etc. on a web page (or WordPress blog) is quite simple. And although this site is first and foremost blog related, this technique works not just for blogs, but any site:

First, simply wrap the ‘anything’ you are positioning in a <div> tag with an enclosed style attribute:

<div style="">
whatever you need to position
</div>

Next, in that attribute, add whatever you need to position. The best one for this case is the margin command.

margin is a simple way to position objects, since it can include negative values (effectively moving the object ‘in the other direction’). For instance, if the position is too far right, try this to move it back:

<div style="margin-left:-20px;">

You can even adjust more than one position at a time with the general version, which takes in all 4 margins:

<div style="margin:-10px -20px -10px -20px;">

If you’re wondering which number is which, the values rotate clockwise, and like a clock, start from the top; so top, then right side, then bottom, then left side.

And although this example uses ‘px’ (pixels), there are other options, such as ’em’ (a unit related to the current font), ‘%’ (percentage) or a floating position value (for example, 2.5 for 250%).

Which unit to use? Ideally, you want to match the unit used to describe the space you’re trying to move around in. If the spacing was in em units, use the same; if percentages or pixels, follow it. That way, as the page adjusts size (different users/computers, for example), the change will be the same for each.

Combining this with the <div> tag, you have a solution for positioning objects. While not the only way (for example, padding is a command that can only be positive, but has it’s uses), it is a simple one to get the job done – and often fits the bill.