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

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.

HTML & CSS design and build websites book BY: Jon Duckett
$10.00 (0 Bids)
End Date: Sunday Feb-25-2018 12:19:42 PST
Buy It Now for only: $25.00
Buy It Now | Bid now | Add to watch list
HGST Ultrastar HUC109060CSS600 600GB 10K 64MB SAS 6Gb/s 2.5" Hard Drive 0B26013
End Date: Tuesday Mar-20-2018 12:19:43 PDT
Buy It Now for only: $60.00
Buy It Now | Add to watch list
AM-Com ClearSpeach DSP Powered Speaker CSS-1 Noise Reduction
End Date: Tuesday Mar-20-2018 11:10:14 PDT
Buy It Now for only: $75.00
Buy It Now | Add to watch list

Leave a Reply

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