Float a Quote

"Because she knows me like no one else in this world, she knew that the silence had meaning. It took only a few seconds before she answered with her own silence."
~Angie

Angie is famous for the "f" word but her writings are filled with gut emotion. She's worth quoting and floating. Floating text or images is done with the float:left or float:right. We like the way the quote looks floated to the left in what nearly looks like a box. Why does it look like a box? Because everything in CSS is a box. If we put borders around the simple paragraph that we are using to float the quote we could see the outline of the box. Some quotes look good in bold font and others in normal font.

Where to start?

We float the quote to the left by adding style to the paragraph tag float:left. We need to tell the browser how wide to make the quote so we guess 150px (150 pixels wide). And we could stop there but instead we tweak the code to suit our style.

Text Justify

We don't have to justify the quoted text but we like the way it looks so we add text-align:justify to make the text align on both sides like a newspaper column. We added some padding to the right and the bottom for visual whitespace.

Simple Float Code

The float code looks long but it's one paragraph that floats to the left. The extra text in the copy-and-paste code for demonstration.

It's only one line of code that looks like this.

<p style="margin-top:0px;margin-bottom:5px;
width:150px;float:left;
color:saddlebrown;font-weight:normal;
padding-right:15px;text-align:justify;">
 

Copy and paste this in your Blog or Web page.

It will look like this.

"YOUR QUOTE GOES HERE. The text you want to float to the left goes here. We made ours brown. You can adjust the color. "

The rest of your text goes here. You can adjust the color, change the normal to bold and adjust the padding to suit your style. We used a width of 150 pixels on the quote but you can increase or decrease the width. Once you have the style in place you might want to try using a different font for the quote.