OLD Writing for Digital Media

Home » How To » How to Make a Floating Sidebar

How to Make a Floating Sidebar

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.

Advertisements

Tell us what you think!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Office Hours

c/t 210-823-0542 (Between 9 am and 10 pm only)
Tu 10 am - 11:30 am, Wed 2:30 - 4:00 pm

Enter your email address to get notifications of new posts by email.

We’re on the twitter!

%d bloggers like this: