OLD Writing for Digital Media

Home » How To » How to make a floating sidebar

How to make a floating sidebar

Recently at: OLD New Media Video Applications

Recently at : Introduction to Social Media Practice

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

Here’s what to 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.

Looks 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 in the Text tab.

DO NOT use the content in these [ ] brackets.

Change the “float: right” to “float: left” to position the text block to the left.

<div style="float: right; width: 33%; margin: 5px; padding-left: 30px;">
PUT CONTENT HERE
</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

%d bloggers like this: