WordPress
When uploading images in WordPress, you have the option of choosing your alignment – left, right, center and none. If you choose none or center, the text will not float up beside the image.
Click the image to see it bigger
If you choose left or right, the image will shift over to the left or the right, and the text below it will float up beside the image.
The problem is, when browsers render HTML, they tend to squish everything up into every possible space, so if you have another image or another paragraph that you don’t want to float up, how do you keep them from doing that?
What we need to do is find a way of telling the browser to stop floating in a certain place. So, we create a bit of CSS to provide this stop. First, we’ll add the CSS to our stylesheet:
.clear {clear:both;}
Before you add this to style.css, check to make sure that there isn’t a class called ‘clear’ already in your stylesheet. If there is, give your new class a different name. It doesn’t matter what you call it, just make it something you’ll remember and associate with what you’re trying to do. (If you’re a client of mine, it’s almost certainly already in your stylesheet…)
Once that class exists in our stylesheet we can now add that class to any element on our site. To do this, we will need to be in the HTML view tab of your post or your page. WordPress tends to get a little confused if you switch back and forth between HTML and Visual view, so once you’ve switched to HTML view on a particular post, you’re probably going to want to stay there, just to be on the safe side…
Now, let’s say we have an image that we’ve floated to the left, and three short paragraphs that follow the image, but we only want two of those paragraphs to float up beside the image, and the third to be underneath both the image and the paragraphs. By applying our ‘clear’ class, we’re telling the browser, if there was anything above this element that was floated, it doesn’t matter, push this element to below the longest of the floated elements.
In the HTML view, we’re going to need to add a paragraph tag around the paragraph we want to push down, so it looks like this:
<p class="clear">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis, dui dapibus feugiat luctus, nisi mauris tincidunt tortor, eu congue purus massa in tortor. Pellentesque urna eros, malesuada a semper ut, vehicula a est. Mauris vel orci vitae ipsum malesuada dictum eget mattis velit. </p>
Note the tag at the beginning of the paragraph, and again at the end of the paragraph. You won’t need to do this on every paragraph – WordPress will automatically add it to every paragraph – only on the ones you want to change – like by adding a class to the paragraph.
Another option is to just add in a bit of code at the place where you want the break to accomplish the same thing. Something like this:
<div class="clear"></div>
The class="clear" can be added to any element – an image, a paragraph, a list, a title, anything – and with the CSS in place in your stylesheet, it will always push that element to the bottom of the longest element that was floated above it.
So, with this code, this:
Click the image to see it bigger
becomes this:
Click the image to see it bigger
and the code looks like this:
<p>Left-aligned image with no caption, and text before and after. <img width="300" height="199" class="alignleft size-full wp-image-535" title="test-image-landscape" alt="" src="http://localhost:8888/betawp/wp-content/uploads/2010/08/test-image-landscape.jpg"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed odio nibh, tincidunt adipiscing, pretium nec, tincidunt id, enim. Fusce scelerisque nunc vitae nisl. Quisque quis urna in velit dictum pellentesque. Vivamus a quam.</p> <p class="clear">Curabitur eu tortor id turpis tristique adipiscing. Morbi blandit. Maecenas vel est. Nunc aliquam, orci at accumsan commodo, libero nibh euismod augue, a ullamcorper velit dui et purus. Aenean volutpat, ipsum ac imperdiet fermentum, dui dui suscipit arcu, vitae dictum purus diam ac ligula.</p>
And now, you can float your elements, and still decide what floats… and what doesn’t.
Posted in: clearing floats :: HTML/CSS :: layout :: WordPress
2 Comments
). But I did get my chance to see what’s out there, which is always fun.
Tweet Tweet
