How To Position Objects on Your Web Page (A Trick With A Little CSS)

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.

SOME ITEMS YOU MIGHT ENJOY
Crank Shaft Position Sensor For 1998-2005 VW Jetta Passat Golf Bettle 06A906433C
$6.89 (0 Bids)
End Date: Saturday Aug-2-2014 21:25:22 PDT
Bid now | Add to watch list
Web Publisher Editor Creator HTML CSS Design Publish Professional Software - #B8
$6.99 (0 Bids)
End Date: Tuesday Jul-29-2014 20:15:07 PDT
Bid now | Add to watch list
HTML, XHTML, and CSS, Sixth Edition
$0.99 (0 Bids)
End Date: Thursday Jul-31-2014 19:00:50 PDT
Buy It Now for only: $4.99
Buy It Now | Bid now | Add to watch list


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>