Testing…
Heh, pay no attention I’m just testing the limits of how fancy I can get within the code limitations of the Pages. Yes, this is what web geeks do for fun on the weekends. I know, it’s pathetic and I need to get a life. Now go away and leave me alone because I’m in the zone and I want to experiment with some definition lists…
WAIT!! I changed my mind—don’t go yet. If the little Islamic looking gazebo thingy below looks all wonky instead of looking like this, then please describe what’s wrong (or upload a screenshot) and let me know what OS & browser you’re using. Okay, now you can get lost. ;o)
Once upon a time is a stock phrase that has been used in some form since at least 1380 (according to the Oxford English Dictionary) in storytelling in the English language, and seems to have become a widely accepted convention for opening oral narratives by around 1600. These stories often then end with “and they all lived happily ever after”, or, originally, “happily until their deaths”. These are examples of the narrative form, and occur most frequently in the narratives produced for children aged between 6 and 8. More at Wikipedia…
Why are you still here? //
Damn, definition lists get stripped out. Okay, then how about…
Hang on…okayyyy, any carriage return gets converted into line breaks, so make sure you have all your tags butted up against each other or everything will go wonky. Now I have to add a paragraph tag to this part so I can clear the floats and reset the margins. Wait… I reset my margins, even used !important, but they’re still missing. Aarrrgh!
WTF took my margins? Give them back, dammit!!
Wait. Wut? The top margin has to be 4ems now? Effing floats & collapsing crap. Okay, I’m done. It’s not worth the agita & bloated code.
11/23/12 - Testing 2-column layout
I noticed Daniel mentioned a desire to compare two articles in a point/counterpoint format, so I decided to test creating a 2-column layout:
Look, Ma—I can even use a blockquote in the columns! The margins are a bit too big for this narrow a width though. Let’s try adjusting them in the right column…
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Let’s add an unordered list:
- Fuzzy Wuzzy was a bear.
- Fuzzy Wuzz had no hair.
- So Fuzzy Wuzzy wasn't fuzzy, was he?
Okay, this is much better. The copy has room to breathe and it’s easier to read.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Let’s add an some custom bullets:
- Ridiculous wingnut talking point
- Angry wingnut talking point
- Yelling wingnut talking point
- OUTRAGEOUS OUTRAGE!!11!
Great! Looks like it can be done. Important: Don’t forget to clear both floats in the divs above or the next element on your page might drift up under the 2nd column. If you view the code of this paragraph you’ll see that I actually used the HTML paragraph tag and added style="clear:both;" to it stop that from happening.
Update: You can download the isolated & cleaned up code from my pastebin. It contains only the two columns and the paragraph below them (to clear the floats). HTML comments have been added to indicate the beginning & end of each column (the first div is the left column, and the second is the right).
Update May 25, 2014: Time for a table test… Nope, tables don’t work right. Gotta stick with divs, I guess.
