He began by casting the “#container” Charm:

On a somewhat dreary day in October, Professor Dumbledore assigned young Harry Potter a new project.

“Harry, I need you to create the perfect Goblet of Liquid Layout. I seem to have misplaced mine, and I have some errands to run this

afternoon which prevent me from concocting it myself.”

“You can count on me, Professor! After all, I am pretty much the

greatest wizard ever – I’m sure I can figure it

out!”

He began by casting the “#container” Charm:

#container{width: 90%;margin: 10px auto;background-color: #fff;color: #333;border: 1px solid grey;line-height: 130%;}

But the Goblet did not appear.

He asked his friend Ron for help.

“Why don’t you try the “#top” and “#top h1” charms?”

#top{padding: .5em;background-color: #ddd;border-bottom: 1px solid gray;}

#top h1{padding: 0;margin: 0;}

Nothing happened.

Just then, Ron’s sister Ginny walked by.

“I hear you need the “#leftnav” spell for the others to work correctly,” she said.

#leftnav{float: left;width: 300px;margin: 0;padding: 1em;}

Harry began to get frustrated.“We’ll never figure this out in

time!”

“My father tried to conjure the Goblet of Liquid Layouts once,” said Luna, passing by on her way to the Potions Dungeon. “I think he mentioned something about the

“#rightnav” spell…maybe it will help!”

#rightnav{float: right;width: 160px;margin: 0;padding: 1em;}

Unfortunately, it didn’t.

As Harry and his friends continued to ponder, Hermione hurried down the corridor towards them.

“Excellent!” Harry cried. “Hermione will know what to do!”With barely a backwards glance, Hermione cast the

“#content” charm over her shoulder as she ran by.

#content{margin-left: 200px;border-left: 1px solid gray;margin-right: 200px;border-right: 1px solid gray;padding: 1em;max-width: 36em;}

“I know we’re close, guys. We can do it! What’s the last piece?”

“I REMEMBER!” Neville exclaimed loudly as he pulled out his wand. “ ‘#footer’ ”!

#footer{clear: both;margin: 0;padding: .5em;color: #333;background-color: #ddd;border-top: 1px solid gray;}

All six young wizards waited with bated breath…

The ghostly image of a Goblet appeared…

At that moment, Dumbledore entered the Great Hall, a wide smile spread across his face.

“Excellent! You did it Harry! Only one step remains: the ‘HTML’ Charm!”</html><body><div id="container"><div id="top">

<h1>This is the Header</h1></div><div id="leftnav">

<p>This is left column text!</p></div><div id="rightnav">

<p>This is right column text!</p></div><div id="content">

<h2>This is a Subheading!</h2><p>This is where your content goes!<p>This is a new paragraph of content!<p>Another new paragraph!<p>LAST PARAGRAPH.

</div><div id="footer">

This is the Footer</div></div></body></html>

TA DA

And so, Harry Potter and his friends completed Dumbledore’s random task, proving once more that Harry’s friends do more

than half the work but he gets all the credit.

Documents

He began by casting the “#container” Charm: