This is an unofficial follow-up to my previous post, titled CSS: Fun With Floating in the Grid. We’ll be using some of the same mentality to make floating elements in your design, like pullquotes and boxes containing interesting facts, something I tend to call infoboxes.
Why Would I Want to Do That?
The idea with floating elements containing information or content is simple: It eases up the design. Let’s say you’ve got a mammoth bulk of text, a truly smashing article, but it’s really a heavy piece with lots and lots of text. There might not be any obvious images or illustrations to ease it up either, what to do, what to do?
So essentially, the idea is to make the design more appealing.
Simple! Use pullquotes, something magazines are really good at. They’re taking quotes from the text, and floats it to the left or right, to break the flow and add some much needed space.
Informational boxes, often containing interesting facts relevant to the content, is another way to do the same thing.
So essentially, the idea is to make the design more appealing. That’s why you’d wanna do that!
Pullquotes
You’ve probably noticed that we use pullquotes here on Devlounge. You can make your own, and add to your site, without much hassle. I suggest that you base it on the blockquote tag, which seems fitting. However, should you be running a blog, then it might clash with your present blockquote styling.
We’ll solve that by adding a class called pullquote. Here’s the code:
[html]
blockquote.pullquoteleft { float:left; margin: 5px 15px 15px 0; }
blockquote.pullquoteright { float:right; margin: 5px 0 15px 15px; }
[/html]
So should you want to have a pullquote to the right, you’ll use this code:
[html]
this is my pullquote
[/html]
Simple, yeah? Naturally, if you want your pullquotes to be styled differently from your blockquotes, you’ll have to edit that.
Infoboxes is Just More of the Same
As you might understand by now, infoboxes are just more of the same. We’ll use a div with a particular class, to float a box to the left or right.
[html]
div.infoboxleft { float:left; margin: 5px 15px 15px 0; padding: 10px; background: #eee; }
div.infoboxright { float:right; margin: 5px 0 15px 15px; padding: 10px; background: #eee; }
div.infoboxright h3 { margin: 0 0 10px 0; padding: 0; font-size: 14px; color: #333; }
div.infoboxright p { color: #666; font-size: 12px; }
[/html]
This is a very simple box, just a grey one with the same font etc. you’re already using. Naturally, you’ll want to complete this one with some styling that works well with your design. However, this is how you use it:
[html]
This is my headline
Here’s my paragraph. I can have several.
See?
[/html]
I recommend using a different font for the content of the infoboxes, as well as using a stronger color for h3 than the actual type (managed with the p of course).
Trimming Down the Code
A quick note to wrap this up! If you really are using the ideas from the previous CSS post, then you can trim down the code for these elements a bit. Since that post wants you to have global classes for floating elements to the left and right, then you can skip the float:left; and float: right; parts, of course.
