When I first started out with WordPress, the layout options felt somewhat constraining. I would want to align paragraphs in a certain way or I'd want better control of the image sizing. Now, to a small extent I've adapted some post layouts to be a little more WordPress friendly,  but I've also picked up several tricks to give me better control over the appearance of each post.

First the basics:

On the WordPress post page, there's a Visual editor and a Text editor.  By keeping the images and formatting visible, the Visual editor gives a slightly better sense of the elements being laid out. The Text editor, however, provides more options by providing access to the bare-bones HTML of your post. Most of the edits I make are to images, which appear in the Text editor as images  (sometimes enclosed in hyperlinks.) Here's what that looks like: <a href="[URL of image]"><img class="alignright size-full wp-image-990" src="[URL of Image]" alt="[Name of image]" width="150" height="150" /></a>

You can add styling to the image by inserting style = "[various styling rules]" right before the src attribute. There are so many options out there, sometimes knowing that something is possible is all it takes. Below are the one's I have used on posts:

style = "clear: both/left/right"

Sometimes I want to line up a paragraph with a particular image. The "clear" attribute can be added to either an image or a paragraph, to make sure it "clears" the element above, even if they would both fit on the line.

By default, this second image would appear next to the image above but below the paragraph next to it. To remedy this, I wrapped the paragraph and the image in a <div style="left"></div> container. By adding the clear: left attribute to that container I was able to move both below the first image, which is left aligned left.

style = "box-shadow: 3px 5px 5px #888888"

Drop shadows, really? SO old fashioned...and yet I use them. Sometimes, the background blends in with the image, like if I'm using scanned sketches or screenshots with a white background. Originally, I just edited a shadow into the images themselves, but this approach depends on the background color of my site staying the same, which it might not. In case the background does change for any reason, adding in a drop shadow means I wouldn't have to go back and change every single image.

style="border-radius: 9px"

Like the drop shadow, I never would have thought that I'd be doing rounded corners, but I actually needed to use both on one of my images for the Too Many Interests post. It was a screen shot of the iPhone reminders list, which has rounded corners. At first, I tried to use a PNG, a file format that preserves transparency, to hide the sharp corners. While WordPress does preserve transparency, the image was too close to white, and needed a drop shadow to help set it apart. When I tried to add the drop shadow, the styling didn't recognize that the corners were transparent, and the sharp edge reappeared in front of the shadow. Instead of using a transparent PNG, I used both a "border-radius" and a shadow. Thankfully, the drop shadow styling recognized that the image had a rounded corner, and I was able to achieve the effect I needed.

width = 21%

Another useful trick is changing the size of the images to a percentage. If you look at the <img> HTML above, you'll see that widths of images in WordPress are typically set as hard pixel dimensions, but they don't have to be. You can change the width value to a percentage of the available space. For instance I have my posts set to a single column layout with a width of 700px. By setting the image at the left to width=21% it will take up approximately 150px of the 70opx wide post space. However, if this were being viewed on a smaller screen, like a tablet, that column layout would shrink and the image size would shrink with it. You can see this by shrinking the size of your browser window. I actually do this fairly often when working on a post to make sure that the layout I'm working on will still make sense on a smaller device.

Animated GIFs:

On the note of sizing images, in WordPress, an animated GIF will not play if it has been re-sized in the post, so when I use one, I try to nail down the layout before exporting the final GIF to the exact pixel dimensions.

I've barely scratched the surface of styling, and I'm still learning the different quirks of formatting within WordPress, but as I continue to post, I continue to learn. It's important to present what you want in the way you want to present it, so be patient and try not to get frustrated.