SHAZAM

This blog post is the ninth in a series of blogs for those who would like to know more about what is going on behind the scenes and try some basic HTML coding for themselves. Once you learn the basics of coding, you will find that it opens up many possible options for your content formatting.

If you have not read the first post in this topic, you can find it here:

Basic HTML Coding Options for WordPress

We highly recommend that you start with the first post in the series if you are new to HTML coding.

In this post we are going to look at some more detailed styling to effect the alignment of an item or block of text.  This will require an understanding of two pieces of information: the box model and the float property.

In order to align an image or a block of text we first need to create a box around it.  We do this using a <div></div> tag. You will wrap these tags around your <img> or text.

Example:

<div><img src=”http://www.yourdomain.com/yourimage.jpg”></div>

By using this <div> wrap, we essentially wrap the image in a “box”.  This box includes an option for a margin, a border around the box, and padding between the box edge and the image or content. You can also define the size of your <div> box. You can set all of these properties within the style attribute of the <div> tag.

Example of the box properties defined:

<div style=”width: 49%; margin: 10px; border: 1px solid #000000; padding: 10px;”>
<img src=”http://www.yourdomain.com/yourimage.jpg”>
</div>

boxmodel

 

In the example above we have defined a box that:

  • takes up 49% of the space that surrounds it  (Using a percentage works great with flexible layouts. You can also use an exact pixel size, but be careful if you are using a responsive layout.)

  • has a margin of space around it of 10px on all sides

  • has a 1px, solid black border around it

  • has a 10px padding space between the border and the image

Now that we have created a box and set its properties, we can align this content left or right using the “float” property.  The float property will cause the content surrounding our box to wrap and flow around it.

Example of the box with the float property:

<div style=”float: right; width: 49%; margin: 10px; border: 1px solid #000000; padding: 10px;”>
<img src=”http://www.yourdomain.com/yourimage.jpg”>
</div>

blog_alignment1

This technique is not for images only.  It can be used with text as well.  Just replace your <img> tag with the text you would like to place in the box.

This techniques goes a little beyond the basics, but it will open up new options of your content layout on your page or post.

Share this post:
Share on FacebookTweet about this on TwitterShare on Google+Pin on PinterestShare on LinkedInEmail this to someone