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.
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:
float:right;
width:300px;
margin:10px;
}
Then just use the quote button on the toolbar to wrap the text you want floated. Here is .
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").
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:
Hope that helps
0 Response to "FloatLeft and FloatRight usage"
Post a Comment