Skip Navigation

FloatLeft and FloatRight usage

Travel Forums System Talk FloatLeft and FloatRight usage

1. Posted by VANagain (Budding Member 5 posts) 2y

Sometimes I can get the Float tag to do what I want and sometimes I can't. Can someone explain its proper usage? Maybe some tips and tricks.

Oh, maybe this is it. Can we only put images in a Float? That works fine for me. But now I'm trying to float text next to some other text and that doesn't work. Then I tried putting an image and text in the float but the text starts at the bottom side of the image and then wraps around under it.

I know how I'd fix this in HTML or CSS but the blog code doesn't interpret that stuff.

And I don't suppose there's the equivalent to a "clear all" that lets you control where the text stops wrapping around a floated image.

Am I expecting too much?

Thanks.

2. Posted by Peter (Admin 5789 posts) 2y

The problem with floating a paragraph is that a paragraph of text by default will take up 100% of the width. Therefore there is no room to float anything on either side. You don't just need to add a float, you need to also change the width.

You can do this by making your paragraph 50% or so for example. The problem will be that you probably don't want all your paragraphs floating, so applying this to all your paragraphs in CSS is probably not what you want :)

The solution is to use some other element to do the floated bits of text and style that to do what you want. It kind of sounds like you want what would be called a "pull quote", where you have a bit of the text you want to highlight in your entry. There is a quote option to use which I have in some cases styled as a pull quote. It uses the html blockquote element which makes sense for this use. You could do the same. This is a very basic rule that will do that for you:

blockquote {

float:right;

width:300px;

margin:10px;

}

Then just use the quote button on the toolbar to wrap the text you want floated. Here is a test blog entry where you can see the result.

3. Posted by VANagain (Budding Member 5 posts) 2y

Thank you! Good info, that it defaults to 100% because it is a paragraph that I am floating.

Yes, a "pull quote" is exactly what I'm trying to do. And I see how you've made the blockquote do that using CSS. So, the main thing is, there are very few elements that we can set in our entries: Heading 1, Heading 2, Blockquote, Bulleted list, Numeric list, and Code. If I make blockquote float to the right, and if I wanted to also float text to the left, I'd have to modify the CSS for one of the others, maybe Code. Yes, Code could be modified because it uses a class named Code.

Aah! The others can't be totally hijacked to be something else because they don't use class names, they use HTML tags: h1, h2, ul, il. I looked at left, center, and right align too. They too have a class ("rightaligned") but I bet they always include the align style ("text-align:right").

4. Posted by Peter (Admin 5789 posts) 2y

You can "hijack" the other elements too, but I'd be wary of doing that, as it would lose a lot of meaning. It's good to be aware of the fact that different elements have different default properties. Most specifically - there are the block level elements and the inline elements.

Block level elements have a 100% width by default and don't allow other elements to sit on their own line. Examples are p, h1, div.

Inline level elements allow other elements on their own line and their width is flexible to their content. Examples are span, b, i, em, strong, etc.

Both types of elements can have their default behaviour changed using something like this:

span {display: block}

Hope that helps