Writing for Digital Media

EMC 3060, Middle Tennessee State University

How to Make a Floating Sidebar

| 0 comments

I found the solution!

You will use a CSS <div> tag to wrap around the content you want to float on the right or left.

Here’s what you will do.

I’ll make this…

At “half seven” on a misty Saturday night in June, the elegant Grand Opera House in Belfast’s city center glimmered and glowed on its corner of Great Victoria Street. The theater enveloped a sellout crowd into its velveted, gilded interiors for a production of “Dial M for Murder.” Most big cities take nights like this for granted, but not Belfast. In Northern Ireland, a quiet evening at the theater has at times been an impossibility.

“We’re savoring the peace,” said one native Belfaster, settling in for the production. “We’re at the theater, aren’t we?”

On and off for decades, sectarian strife made going out at night a risky proposition. Bombings forced businesses and dramatic venues, including the Grand Opera House, to shut down. Cabbies designated “no-go” areas throughout the city. Hotels began frisking their guests.

Look like this:

At “half seven” on a misty Saturday night in June, the elegant Grand Opera House in Belfast’s city center glimmered and glowed on its corner of Great Victoria Street. The theater enveloped a sellout crowd into its velveted, gilded interiors for a production of “Dial M for Murder.” Most big cities take nights like this for granted, but not Belfast. In Northern Ireland, a quiet evening at the theater has at times been an impossibility.

“We’re savoring the peace,” said one native Belfaster, settling in for the production. “We’re at the theater, aren’t we?”

On and off for decades, sectarian strife made going out at night a risky proposition. Bombings forced businesses and dramatic venues, including the Grand Opera House, to shut down. Cabbies designated “no-go” areas throughout the city. Hotels began frisking their guests.

 

Here’s the code I used. You’ll need to add this code around your content (PUT YOUR CONTENT HERE.)  in the Text tab.

HINT: Switch back to the Visual tab to see the effect and then ALWAYS switch to the Text tab before you Save or Update it otherwise the effect might not take…affect. (It’s a WordPress thing.)

<div style="float: right; width: 33%; margin: 5px;">
<p style="padding-left: 30px;">PUT YOUR CONTENT HERE.</p>
</div>

If you want additional styling around the text look up “CSS styles for backgrounds”, etc.

Add a comment to this post if you find some interesting ways to style it.

Leave a Reply

Required fields are marked *.