Advanced CSS: Layout Tricks and Lab Experiments

Squidoo throws a few extra curveballs to challenge people who know basic CSS. We're used to setting up style sheets to define custom formatting for parts of our page -- the headers, links, images and so on.

Instead, Squidoo lenses have a built-in style sheet that provides a consistent look and feel to Squidoo lenses. Squidoo doesn't recognize the <div> or <span> tags, probably because it's so easy to make a huge mess with them. But if we absolutely insist on tweaking Squidoo's clean and friendly styles, we can use in-line CSS, tucking extra CSS code inside of formatting tags like italics and emphasis, objects like links and images, and in paragraph tags.

As you scroll down this lens, you'll see why Squidoo is so strict on styles: unless you're very methodical and restrained in your use of CSS, you can wind up creating a garish patchwork of fonts, colors, and dividers! CSS is powerful, and power can be abused. (Let me point to Euryale's discreet use of font changes for a more subtle use of CSS.)

One last quirk of Squidoo is that it automatically throws in <br> whenever you hit return, so you'll have to be careful of unintentional paragraph breaks signalling the end of one paragraph (where you've carefully added a bunch of CSS), and the beginning of a new one.

 

Okay, it's time to start experimenting.

Widgets
Widgets
Widgets
Widgets
Widgets

Sporks

Jabberwocks That Burble

Here's the code for that example:

<p style="float: left; width: 25%;">Widgets<br>Widgets<br>Widgets<br>Widgets<br>Widgets
<p style="float: left; width: 25%;">Sporks
<p style="float: left; width: 25%;"><img src="http://www.istad.org/squidgraphics/hunh.jpg">
<p style="float: left; width: 25%;">Jabberwocks That Burble</p>
<p style="clear:both;">

In sum, what I did was:

• Choose the number of columns I wanted. Four? Okay, then I need to set the WIDTH of each paragraph to 25%.
  
• Set the paragraphs to float so they'd align side-by-side, instead of <p> starting a new line like it usually does. I chose float: left so they'd line up left to right; if you say float: right they line up right to left.
• Created an honest-to-gosh new line with <p style="clear: both;"> because otherwise the next line (the teal dashed line and "Here's the code...") tried to squash itself into the Jabberwock column under "Burble."

 

Paragraphs can serve as handy dividers.

You've got five pieces of a paragraph to play around with: the background, and the top, bottom, left and right border.

For example, if I wanted to make a gray paragraph with a multicolored border:

I'd probably end up with something pretty garish.

Here's the code for that mess:

<p style="background-color: #ddd; border-top: solid 2px red; border-left: double 4px blue; border-right: dashed 1px green; border-bottom: dotted 7px purple; text-align: center; color: teal; width: 60%; margin-left: 20%;">I'd probably end up with something pretty garish.</p>

However, with a little more restraint, one can come up with all sorts of tricks to make up for the fact that Squidoo text modules don't recognize <hr>.

Tip: The W3 Schools website lets you view and test examples of CSS borders and backgrounds.

For example, here's code for making sub-headings inside of text modules:

<p style="border-bottom: teal 1px dashed; width: 70%; margin-bottom: 6px; color: teal; font-weight: bold;">You can include formatted text...

Here's the result:

You can include formatted text...

You can also use an empty paragraph with a border and a background color to make a two-tone divider. I find I need to include a nonbreaking space (&nbsp;) to force the empty paragraph to display:

<p style="font-size: 8px; line-height: 8px; background-color: orange; border-top: solid 2px #333; margin-bottom: 3px;">&nbsp;</p>

which creates the following:

 

In some of my side-by-side examples above, I used percentage; in others I used pixels.

Percentage is safer: it's a fraction of the total column width, so as long as you don't try to jam too much into a column, it'll fit your Squidoo lens.

However, images tend to go fuzzy or blocky if you specify their dimensions in percentage or ems (you can do the latter, by the way). So sometimes you need to use pixels.

Question: How wide is a Squidoo column, really?

Here's my orange paragraph with no width set. So the width is the column default.

UPDATE 4/17/08: The width of a maxed column's content is now 590px, but images extend past it and crop at 620px. The cropping may vary slightly by browser.

When I unmaxed this lens as a test, I found that paragraphs were 600 pixels wide, and graphics got cropped at 600 pixels as well.

 

What on earth did I do to get this? Brace yourself.

Wonder
what
this
does?

I created this fancy chunk of CSS-formatted text and a floated image and tried pasting it into various modules. Here's the results.

You probably shouldn't create something that complicated, because chances are it'll look different on different browsers. But just in case you want to pluck out some trick from the above example, here's the code I used to create it:

<p><img src="http://www.istad.org/squidgraphics/hunh.jpg" style="float: right; width: 60px; background-color: #dee; border: dotted 1px #abe; margin-top: 6px; padding: 10px; padding-bottom: 22px;" /></p><p style=" float: right; background-color: #ded; border: dotted 1px #eba; margin:0; width: 5em; height: 101px; text-align: center; font-family: monaco; color: #bab; font-size: 10px;"><br />Wonder<br />what<br />this <br />does?</p><p style="float: right; background-color: #ede; border: dotted 1px #bae; margin:0; padding-left: .5em; padding-right: .5em; width:50%; height: 101px; color: #a7c;">I created this fancy chunk of CSS-formatted text and a floated image and tried pasting it into various modules. Here's the results.</p><p style="clear: both;"></p>

I was being paranoid about line breaks because Squidoo tends to interpret them as <p> even when I don't want an extra one. Unfortunately, omitting line breaks makes code hard to read.

Also, I foolishly used float: right instead of left. Try selecting the text in those paragraphs, and you'll see they're arranged on the page in reverse, which would really screw up somebody trying to copy/paste the content. (On the other hand, that might be an interesting way to drive plagiarists bonkers!)

 

Here's how I set up the photo credits for my Jackie Robinson lens.

Here I linked to the source of each image, the photographer's name, and the Library of Congress' notes regarding how it could be used.

Once again I am incredibly grateful for Creative Commons searches.

But in this case my little "hunh?" doodle was something I whipped up in 2 minutes on Corel Painter.

Are you getting tired of this graphic?

Here's my tribute to Prometheus.
Unfortunately, classics and mythology majors should not be allowed to create LOLCATZ style graphics.

The code for this layout looks pretty complicated, but most of the CSS is just fine-tuning with padding and margins.

The basic concept is much like the four-paragraph layout above, except that this time, I have rows of two paragraphs, each one set to a width of 200px (which is a little less than half a maxed Squidoo column, giving me wiggle room for margins).

Inside each paragraph, I have an image that is ALIGNed left or right within that paragraph. In other words, each paragraph has the following skeleton:

<p style="float: left; width: 200px; height: 130px; background: #eee;"><img src="image.jpg" align="left OR right">

Now, throwing in some text formatting, padding and margins, it looks like this:

<p style="float: left; padding: 15px; font-size: 9pt; height: 130px; width: 200px; background: #eee; margin-right: 10px; margin-bottom: 10px;"><img src="http://www.istad.org/squidgraphics/hunh.jpg" align="left" style="margin-right: 20px;"><br>Here I linked to the source of each image, the photographer's name, and the Library of Congress' notes regarding how it could be used.</p> <p style="float: left; padding: 15px; font-size: 9pt; height: 130px; margin-bottom: 10px; width: 200px; background: #eee;"><img src="http://www.istad.org/squidgraphics/hunh.jpg" align="left" style="padding-left: 10px; margin-right: 20px;"><br>Once again I am incredibly grateful for Creative Commons searches.</p>

<p style="float: left; padding: 15px; font-size: 9pt; height: 130px; width: 200px; background: #eee; margin-right: 10px; margin-bottom: 10px;"><img src="http://www.istad.org/squidgraphics/hunh.jpg" style="margin-right: 20px; float: left;"><br>But in this case my little "hunh?" doodle was something I whipped up in 2 minutes on Corel Painter.</p><p style="float: left; width: 200px; padding: 15px; font-size: 9pt; height: 130px; margin-bottom: 10px; background: #eee;"><img src="http://www.istad.org/squidgraphics/hunh.jpg" height="120px;" align="left" style="padding-left: 10px; margin-right: 20px;"><br>Are you getting tired of this graphic?</p>

<p style="float: left; padding: 15px; font-size: 9pt; height: 200px; width: 440px; background: #eee; margin-right: 10px; margin-bottom: 10px; text-align: center;"><img src="http://www.istad.org/store/prometheuslol.jpg" style="float: left; margin-right: 20px; margin-left: 40px;" height="190"><br><br><b>Here's my tribute to Prometheus.</B><br> Unfortunately, classics and mythology majors should not be allowed to create LOLCATZ style graphics.</p>

Addendum Margaret Shaut asked in a comment:

"One question: can't this be used very well in the link list module? I've used the link list (sans links) for places where I needed to do things I couldn't elsewhere. The Link List is a very flexible module."

Answer: yes, what a good suggestion! Although I think one could only get one photo + credit per link. However, the Text List essentially provides you with ready-made rows, so then you merely need to worry about columns. Remember both modules as layout tools.

 

In the examples above, I was having alignment problems. I kept having to hack by adding pixels or fiddling with percentages.

Let's find a way to align columns.

Starting with the 4-column experiment:

Widgets
Widgets
Widgets
Widgets
Widgets

Sporks

Jabberwocks That Burble

What happens if I add dotted borders with border: dotted 1px?

Widgets
Widgets
Widgets
Widgets
Widgets

Sporks

Jabberwocks That Burble

Uh oh! Three problems.

• Double-thickness borders between columns.
  
• At least on my browser, the borders aren't counted as part of the column's width, so they push the total width of four columns to more than 100%. Ack. It's time to go with fixed widths, since Squidoo modules are fixed width.
  
• The column heights don't line up. In the last example I solved this by setting a fixed pixel height, but now I'm going to use ems -- the width of a lowercase m -- so that the columns will stretch or shrink to fit the height of the text in them.

Here's a mock-up of what we're aiming for with the various dimensions labelled.

1. First, YOU decide:


• N = the number of columns you want.
  
• BW = how wide you want your borders, in pixels. My example has 1-pixel borders.
  
• Total width, in pixels, of your table. In layout experiment #3, I discovered that the maximum width of a maxed lens module is 590 pixels, and for an unmaxed lens it's 600 pixels. If you exceed the maximum width, your columns will wrap strangely!
  
• border-style. For my example, I've chosen "dotted," but you can pick a different style.


2. Second, you'll need to do some math.


• B = BW x (N + 1). B is the total number of pixels set aside for borders.
  
• C = (T - B) / N. C is the width of your columns in pixels.


3. Okay! It's time to create a rough draft of your table.


• For the first column, you'll want borders on all four sides. Define the column like this (feel free to change "dotted" to a different style):
  
  <p style="float: left; width: Cpx; border: dotted BWpx;">Your Content<p>
  
  
• For the rest of the columns, you'll only want borders on three sides; otherwise the left side will be double-width. So define them like this:
  
  <p style="float: left; width: Cpx; border: dotted; border-width: BWpx BWpx BWpx 0px;">Your Content<p>
  
  
• After setting up all your columns, end with
  <p style="clear: both;">
  
  
• Now you'll need to SAVE your text module to see how it looks.
  
  
• Here's my example (I've made the columns narrower to fit this indented list):
  
  

  Widgets
  Widgets
  Widgets
  Widgets
  Widgets
  

  Sporks
  

  
  

  Jabberwocks That Burble
  

  
  <p style="float: left; width: 100px; border: dotted 1px;">Widgets<br>Widgets<br>Widgets<br>Widgets<br>Widgets
  <p style="float: left; width: 100px; border: dotted; border-width: 1px 1px 1px 0px;">Sporks
  <p style="float: left; width: 100px; border: dotted; border-width: 1px 1px 1px 0px;"><img src=http://www.istad.org/squidgraphics/hunh.jpg>
  <p style="float: left; width: 100px; border: dotted; border-width: 1px 1px 1px 0px;">Jabberwocks That Burble
  <p style="clear: both;">



4. Now you can calculate your column heights.


• After some experimentation, I found that text line-height is between 1.2 and 1.4 ems, depending on the font. For ease of calculation and to give a little wiggle room, I upped this to 1.5. So:
  
• L is the number of lines of text in your tallest column.
  
• H = L x 1.5. H is the height of a column measured in ems. Calculate H, then,
  
• Insert this into your style-definition (after width: Cpx is a good spot):
  height: Hem;
  
  
• Here's my example after doing that:
  
  

  Widgets
  Widgets
  Widgets
  Widgets
  Widgets
  

  Sporks
  

  
  

  Jabberwocks That Burble
  

  
  <p style="float: left; width: 100px; height: 7.5em; border: dotted 1px;">Widgets<br>Widgets<br>Widgets<br>Widgets<br>Widgets
  <p style="float: left; width: 100px; height: 7.5em; border: dotted; border-width: 1px 1px 1px 0px;">Sporks
  <p style="float: left; width: 100px; height: 7.5em; border: dotted; border-width: 1px 1px 1px 0px;"><img src=http://www.istad.org/squidgraphics/hunh.jpg>
  <p style="float: left; width: 100px; height: 7.5em; border: dotted; border-width: 1px 1px 1px 0px;">Jabberwocks That Burble
  <p style="clear: both;">

Final comments:

• You can define <IMG> dimensions in ems, so you can make sure an image won't spill over the bottom of a column by defining its height in ems and letting the browser figure out the width. The disadvantage is that images get fuzzy or blocky when the browser resizes them.
  
  
• Since the column widths had to be set in pixels to work with border-widths, it's possible that your text may overflow columns horizontally if someone has their text displaying at a larger size than yours. Try increasing text size in your browser's VIEW menu to get a sense of this.
  
  
• To change the background color, or even to make a repeating image as a background, check out the W3 Schools page on CSS backgrounds. If that all looks too intimidating, just use background-color: #colorcode; using a color code from this chart.
  
  
• This same technique works on non-Squidoo pages, of course! But there you'll probably want to use <div> instead of <p>, and define your .first-column and .default-column in a style sheet instead of inline.
  

Okay, now for the final test: how do we get multiple rows without using a table? In other words, where's our faithful old <TR>?

I'm guessing the equivalent would be clear: left inside the style-definition for FIRST paragraph of the new row. Let's see.

Widgets
Widgets
Widgets
Widgets
Widgets

Sporks

Jabberwocks That Burble

Widgets
Widgets
Widgets
Widgets
Widgets

Sporks

Jabberwocks That Burble

Whoops! By default, paragraphs have margins before and after them, plus I've got the double-border problem between rows now. So we need to apply margin: 0px; to each row, and for rows below the first row, we'll have to set the top-border width to zero.

Widgets
Widgets
Widgets
Widgets
Widgets

Sporks

Jabberwocks That Burble

Widgets
Widgets
Widgets
Widgets
Widgets

Sporks

Jabberwocks That Burble

<p style="margin: 0px; float: left; width: 120px; height: 7.5em; border: dotted 1px;">Widgets<br>Widgets<br>Widgets<br>Widgets<br>Widgets
<p style="margin: 0px; float: left; width: 120px; height: 7.5em; border: dotted; border-width: 1px 1px 1px 0px;">Sporks
<p style="margin: 0px; float: left; width: 120px; height: 7.5em; border: dotted; border-width: 1px 1px 1px 0px;"><img src=http://www.istad.org/squidgraphics/hunh.jpg>
<p style="margin: 0px; float: left; width: 120px; height: 7.5em; border: dotted; border-width: 1px 1px 1px 0px;">Jabberwocks That Burble
<p style="clear: left; margin: 0px; float: left; width: 120px; height: 7.5em; border: dotted; border-width: 0px 1px 1px 1px;">Widgets<br>Widgets<br>Widgets<br>Widgets<br>Widgets
<p style="margin: 0px; float: left; width: 120px; height: 7.5em; border: dotted; border-width: 0px 1px 1px 0px;">Sporks
<p style="margin: 0px; float: left; width: 120px; height: 7.5em; border: dotted; border-width: 0px 1px 1px 0px;"><img src=http://www.istad.org/squidgraphics/hunh.jpg>
<p style="margin: 0px; float: left; width: 120px; height: 7.5em; border: dotted; border-width: 0px 1px 1px 0px;">Jabberwocks That Burble
<p style="clear: both;">

If you don't want your text/images bang up against the lefthand edge of each column, use padding and/or text-align: center;

To scoot contents down vertically, I recommend plain old line breaks.

 

Well, gosh darn, this is easy!

I've been having trouble getting <P align=center> to work lately-- who knows why-- and we can't use <div align=center> because Squidoo doesn't trust us with the POWER OF THE ALMIGHTY DIV! *woo*

Er, anyway.

Other CSS gurus probably knew this, but I didn't.

If you've specified the width of something (in ems or pixels), then set the left and right margins to auto.

The shorthand margin: X Y; sets the top and bottom margins to X and the left and right margins to Y. So:

w00t

is created by: <p style="margin: 0 auto; width: 2em;">w00t</p>

If you don't know the width of something, then set the margins to equal percentages.

<p style="margin: 0 30%;">Behold the Jabberwock!</p> produces:

And hast thou slain the Jabberwock? Into my arms, my beamish boy!

Note that in this case, the text isn't centered -- the block as a whole is centered. To center the text as well,

<p style="margin: 0 30%; text-align: center;">Behold the Jabberwock!</p> produces:

And hast thou slain the Jabberwock? Into my arms, my beamish boy!

Vertical centering is still a PITA. Also, IE5 and lower don't understand auto margins. But at worst that means some people will see your centered stuff left-aligned.

 

I got pretty complicated back there, but sometimes you just need a list with graphic on the left, description on the right. See "How to Fix Amazon Listings With Broken Images" if you're trying to tweak the Squidoo Amazon module.

But if this is the sort of layout you want, read on:

My main Cafepress store.

My other Cafepress store.

This is easy peasy. For each image + description combination, do this:

<p style="clear: left;"><img src=[imageURLgoeshere] style="float: left; margin-right: 20px;">Put your image description here. To have the text start partway down from the top of a graphic, as I did for the second store, use one or two <br> line breaks to skip lines at the start of the description.</p>

See what I've done? The float: left; sends the image all the way to the left, so the text description will flow around it to the right. The clear: left; makes the next paragraph override the float: left of the image above it, and start on a new line.

Now, to tweak the spacing:
-- Want more padding on the left? Insert margin-left: 20px; in the paragraph or image style tag.
-- Want to or expand the size of a margin or the space between image and text? Change 20px to however many pixels you want
-- For extra space between each entry, hit return before starting the <img src=...> tag, or you can get snazzy and add a margin-botton: 15px; to each paragraph's style tag.

 

Well, between the new photo gallery module and SquidUtil's Table Layout tool, a lot of my earlier experiments are obsolete. But here's a fun one I've been doing lately: Rounded corners!

Unfortunately, Microsoft can't figure out how to support it, and says they'll include it in IE9...maybe. No one knows what gives; it's been part of standard CSS for years. So please remember your poor deprived IE users who will be seeing square corners.

Whee! This uses the CSS property called "border-radius".

CSS Code:

<p style="background-color: #f90; color: white; font-size: 14pt; font-weight: bold; padding: 15px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">Whee, Lookit the Rounded Corners! </p>

Most of that gobbledygook is just font formatting, coloring the paragraph background, and a bit of padding so the text isn't jammed against the outsides of the paragraph.

So tossing out all the fonts-related stuff, here's the "sandwich" you need to use:

<p style="background-color: [some color]; -webkit-border-radius: [number]px -moz-border-radius: [number]px">

But why does it seem to specify the border-radius twice? Because some browsers implemented it one way, before it was made standard, some came up with another way. -moz stands for "Mozilla", and -webkit is Safari, Opera, and ... Google Chrome, I think. In another year or two we should be able to use plain old border-radius, but in the meantime you have to repeat yourself.

Note: you don't have to set a background color. Instead, you could make, say, a round border, like this:

OK

<p style="border: solid 10px #f90; width: 30px; height: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; text-align: center; padding: 2px;">OK</p>

So, putting it all together, we can have a shaded paragraph with a round border, and then, inside of it at the top, we can put a colored titlebar. Insta-widget!

Woo, a WidgetOption 1 :: Option 2
Option 3 :: Option 4

<p style="text-align: center; font-size: 9pt; font-family: Arial; font-weight: bold; line-height: 14pt;background-color: #eee; border: solid 1px black; -moz-border-radius: 15px; -webkit-border-radius: 15px; padding: 0px; width: 11em;"><b style="text-align: center; display: block; background-color: navy; color: lightgray; font-size: 10pt; padding: 2px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; border-bottom: solid 1px #black;">Woo, a Widget</b><b style="display: block; padding: 3px; text-align: center; margin: 0px;">Option 1 :: Option 2<br:>Option 3 :: Option 4</b></p>

Gah, what a mess, eh? I color coded it thusly:

black: The black border and gray background, the overall paragraph. Notice I had to set the width so the widget wasn't as wide as the whole column. I used em instead of pixels since I don't know how big fonts are on different computers... they may take up more or less pixels, but em is always the width of the letter em. You'll have to adjust this to fit the width of your text.

Navy: The navy strip at the top of the widget, including the light gray lettering. I got sneaky here. Just as you can set the top, bottom, left and right margins or padding individually, you can have different rounded corners. So I made the top left and right corners round -- and a little smaller than the outer paragraph so the navy wouldn't spill over the border -- but left the bottom two corners alone. Border-bottom draws the horizontal divider at the bottom of the navy area.

Gray: This is a little more formatting to get the letters inside the main body of the widget centered and (more importantly) with padding so they don't jam against the black border. I couldn't put padding on the whole widget, or the navy section would've had a light gray border around it.

I hope that makes sense. If not, just copy and paste the code, changing the words to suit your content. :)