One of my little bug-bears is when you have some text (a sub-headline, list, paragraph, whatever) which doesn’t quite wrap round an image.
Here’s an example.
And we want it to look pretty, like this…
Solve this issue with custom.css…
Fortunately, there’s a very easy way round this. All you need to do is to add this following one line of css into your custom.css file
1 | .custom .clear_b {clear:both;} |
Essentially, clear:both; commands an element with the class .clear_b to clear it’s preceding element if it’s either floated left or floated right.
If we don’t do this, the element we’re wishing to clear will default to hugging up to your image as soon as it’s allowed.
Adding the ‘clear_b’ class to your wordpress posts
So, the next thing we need to do is to add the .clear_b class to the sub-headline, paragraph, ect we want to clear.
To do this simply hop into the HTML tab in your post/page admin screen (top-right)
This is a working example
Here’s how we got the above (↑) sub-headline to clear the image before it.
We simply located it within the HTML tab and inserted =class"clear_b" between <h3 and the closing >.
So it went from looking like this…
<h3>This is a working example</h3>
to this…
<h3 class="clear_b">This is a working example</h3>
And voilà! we’re done.
Please Note: when applying the clear_b class to an element within your HTML there is no ‘.‘ immediately before clear_b. We only need to add the full-stop/period in custom.css.
We can apply exactly the same method to any element. Such as..
Un-ordered lists
<ul class="clear_b">Ordered Lists
<ol class="clear_b">Where it gets a little more tricky…
Other Images.
Images more than likely have their own multiple classes, so you need to add clear_b within the two quote ” ” marks immediately after it says class=.
By default your image html will look something like
<img class="alignleft size-full wp-image-1349" title="text-before" src="http://ric....All we need to do is add clear_b somewhere between the quote marks (making sure you have a space between either side) like so
<img class="alignleft size-full wp-image-1349 clear_b" title="text-before" src="http://ric....Paragraphs
One of the advantages/disadvantages of wordpress is it doesn’t automatically add <p></p> tags to paragraphs. So if you’re looking to clear a paragraph you need to add your own <p></p> tags (again this is only within the HTML Tab).
All you need to do, is identify the paragraph you’re looking to clear and add <p> immediately before it and </p> immediately after.
So you want to turn something like this:
This is an example of how a paragraph automatically appears within the html tab of the wordpress post editor.
into this…
<p>This is an example of how a paragraph automatically appears within the html tab of the wordpress post editor.</p>
Simples!
Needless to say you can add clear_b to your own <div>s and <span>s too, but I’m guessing if you know how to do this you probably don’t need this tutorial 
However, in any event, please drop a comment below, I’m always happy to help…
{ 2 comments… read them below or add one }
Never, ever thought of this haha. This has been plaguing me ever since I started blogging. xD Great writeup Richard, love reading your tutorials.
Thanks Alex, this means a lot – especially coming from you!
(you may notice something familiar about the post-author section!)
