WordPress Lifesavers: Clear Left or Right

You’re going to laugh at me, straight up. Some of us at SWM are WordPress gods (@Paul_Ruescher), but others are just ok. I’m somewhere in between, I can’t build a WordPress theme from scratch but I can definitely take out pieces I don’t need. There’s nothing more gratifying than deleting pieces of code you don’t need. OMG drool…

But most of us deal with WordPress on a simpler level than that. We don’t want to add crazy JQuery features and image sliders or build themes from scratch, but we do need to be able to make simple typographic changes that improve the layout of our content when we’re writing a blog post.

Now some of you will read this and say “yeah, pretty basic”, but I’m sure there are dozens of others who will benefit from this quick tip and use it daily. I myself am probably going to wind up attaching the following small piece of code to half a dozen posts today. Here we go…

Where to use the Clear Left function

Say you’re having trouble with text. You have the perfect image, but the text is constantly wrapping it. Why? Because WordPress is great at a lot of things and it’s trying to help you, but it doesn’t know quite what you’re doing. Take this snippet:  <br style=”clear: left;” /> and throw it after your text. The result will be that the next line of text you write or image you add will sit BELOW all the other content on the page and be styled page-left, even if there’s an image in your way.

The image here is from a page which displays employee profiles in a standard format down the page. Notice the horizontal line we’ve inserted? Ordinarily, this would appear immediately underneath “…to our communities”. In the old days you’d have to write enough content to fill up the entire space next to this image in order to get the horizontal line to go right across the page. Using the Clear Left function immediately before the horizontal line means that everything gets pushed down and you can start afresh!

What about clearing the page to the right?

It’s the same deal. If your page will look better with the images aligned to the right, use the clear right function
<br style=”clear: right;” /> and everything will shuffle down and over.