patndoris TechnoGeek

Have you ever wanted to include a quote (or image with quote) in your post, but wanted it set off - display it more prominently than just a blank line before and after or a bit of indent? Float is a great way to achieve this. This floating area is a paragraph unto itself. It’s just that in this case, we want the paragraph side by side with other text, instead of one on top of the other.

Now, let’s talk about the difference between margins and padding. Visualize a square (the “special” paragraph). In this case, there is no border displayed around the box, but it’s helpful to imagine one. The margin is the distance from the imaginary border towards the center of the box. Margin is only about what’s inside the box. Think of padding like a protective layer of space outside the box. Padding is like "personal space" it’s the distance between the box border and other text and graphics. In some cases, you can achieve much the same result using margins or padding. However, the distinction is very important. If you use a colored background or border for your area you will need to understand the difference. So for the sake of simplicity, I will include all the options for both margins and padding in this code. You can always set them at 0px if you don’t need to use them.

For this example I want the text to start at the top of the box, or a top margin of 0px, and ends 5px from the bottom margin. Since I’m using float left for this, I don’t need any left hand padding, but I want to give a 20px space between the quote and my other text. Next, think about where the box will float. Is it left? Right? That’s up to you, but it must be stated in the code. Along with the location will be the size. You’ll want to think about how wide you want this separate area to be. In this example I’m using float left and a 200px width.

Finally, consider text as well. To set a quote off, you’ll likely want to use a different color, perhaps even a different font and add a little flair to get attention. In this example I’m using aqua for my color (you can use the name or the hex code). I’m using Comic Sans MS, normal weight, italic, and 16px in size. I’ve also chosen in justify my text, so it extends fully from left to right margin and appears more box-like.

Here’s an example with an image and caption.

this is my logo

Lorem ipsum dolor sit amet et aspernatur quae explicabo architecto ipsam perspiciatis unde magni ipsam ipsam, ratione odit architecto beatae error quia sit ab aspernatur eos sunt veritatis magni magni, quasi ratione voluptas et explicabo doloremque magni sed dolores eaque aspernatur aperiam fugit explicabo perspiciatis perspiciatis, vitae odit iste ipsam architecto ut ipsa quae error explicabo natus fugit voluptatem.

Now go have some fun and try it out!