A related new bbcode has been added: clear. Before explaining how
to use it, I will demonstrate why it's needed.
Consider the following:
In my browser (and probably yours too?) the images "stagger" like a staircase. Not at all what I wanted. Here's what I wanted:
This is what the clear bbcode let's you accomplish.
Now, a technical explanation. When you use the imgleft and imgright bbcodes, what they are doing is "floating" your image to the sides. (For web dev savvy folks, we're using CSS floats.) Anything that comes after will continue wrapping around them until they finally get to the bottom of the image. This includes any images that may come after, as illustrated above. It can also include your forum signature.
To avoid things crashing into each other, you need to tell the browser to stop wrapping. The clear tag code can do that. (For the web dev savvy folks, we're using CSS clears.) Here's the syntax you want to use:
So where do you put it, and how do you know when to use it? Generally, here's the pattern to use:
(text that should wrap)
(text that shouldn't wrap any more)
You just stick the clear after the text that should
wrap and before the text (or images) that shouldn't
Here's another way to think of it: A clear says "make sure that everything that follows gets placed below any floating images we might have".
For more advanced usage, you can also specify "left" or "right" instead of "both". Normally, "both" should be fine. But if you want to do something really complicated that has images floating on both sides, these will let you tell the browser to only skip down after images floated on the left (for "left") or images floated on the right (for "right").
As an example, here's how I did the nicer layout above:
Code: Select all
If you use the imgleft or imgright bbcodes in a post, it's probably a nice safety touch to put a clear at the end of your post just to make sure it doesn't crash into your signature. It's not strictly required, and if your post is long enough it shouldn't be an issue. But it can help make sure that it doesn't make things crash into each other on someone else's browser.