Extra Side Bar

By michal frackowiak

Description

Creates an extra side-bar using the floating div element. It is quite easy if you know CSS.

To use this feature, copy the code below into your wiki page.

Code

[[div style="float:right; width: 15em; padding: 0 1em; margin: 1em 0 1em 1em; border-left: solid #888888 1px; background-color: #FFFFFF;"]]
++ Side content

In fact you can put almost anything in the side bar. E.g. an imported RSS feed or recent forum posts, members of your site. Like below ....
[[module Members showSince="no"]]

[[/div]]

++ Main content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum placerat purus eget nunc. Class aptent 
taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin cursus nisi sed massa. 
Curabitur a sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
 Aliquam scelerisque mi sit amet pede. Etiam mollis ornare nulla. Donec eu massa. Aenean id nisl nec erat 
sollicitudin faucibus. In fringilla dui scelerisque nulla. Cras convallis posuere lacus.

Donec malesuada. Vestibulum pretium. Nullam euismod sem eget nunc nonummy dictum. In scelerisque tempus 
magna. Etiam condimentum condimentum risus. Mauris ac purus sed felis placerat fringilla. Ut eleifend eros
 lobortis lorem. Phasellus posuere metus quis lacus. In tincidunt dolor eu augue luctus varius. Sed sagittis. Ut
 ultrices gravida urna. Phasellus turpis sapien, lobortis id, vehicula vel, consequat in, pede. Aenean ligula augue, 
feugiat non, dapibus consequat, facilisis vitae, odio. Mauris quis libero. In laoreet felis. Fusce ac neque non
 ipsum sodales elementum.

In fact you can put almost anything in the side bar. E.g. an imported RSS feed or recent forum posts…

In action

Side content

In fact you can put almost anything in the side bar. E.g. an imported RSS feed or recent forum posts, members of your site. Like below ….

michal frackowiak

Squark

Helmuti_pdorf

pieterh

James Kanjo

leiger

Main content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum placerat purus eget nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin cursus nisi sed massa. Curabitur a sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam scelerisque mi sit amet pede. Etiam mollis ornare nulla. Donec eu massa. Aenean id nisl nec erat sollicitudin faucibus. In fringilla dui scelerisque nulla. Cras convallis posuere lacus.

Donec malesuada. Vestibulum pretium. Nullam euismod sem eget nunc nonummy dictum. In scelerisque tempus magna. Etiam condimentum condimentum risus. Mauris ac purus sed felis placerat fringilla. Ut eleifend eros lobortis lorem. Phasellus posuere metus quis lacus. In tincidunt dolor eu augue luctus varius. Sed sagittis. Ut ultrices gravida urna. Phasellus turpis sapien, lobortis id, vehicula vel, consequat in, pede. Aenean ligula augue, feugiat non, dapibus consequat, facilisis vitae, odio. Mauris quis libero. In laoreet felis. Fusce ac neque non ipsum sodales elementum.

Rate this solution

If you think this solution is useful — rate it up! Or dump it otherwise.

This has been very useful and easy to use

drashok 1167732509|%e %b %Y, %H:%M %Z|agohover

HAPPY 2007
Thank you.
This has been very useful.
It is simple to implement.
Enhances information design
drashok

¿How to make a css class?

kaizen 1180421874|%e %b %Y, %H:%M %Z|agohover

Hi, I'm trying to make a css class from this, and my code is:

div.float-right{
    float:right; 
    width: 15em; 
    padding: 0em 1em; 
    margin: 0em 0em 1em 1em; 
    border-left: solid #888888 1px; 
    background-color: #FFFFFF;
}

To use it:

[[div class="float-right"]] ... [[/div]]

But something weird happends. No box.

P.D.: Sorry if it's a very css basic question, I'm start learning.

kaizen 1180467143|%e %b %Y, %H:%M %Z|agohover

Sorry about the example. This works ok. The problem is with a float box on the left:

div.float-left{
    float: left;
    witdth: 15em;
    padding: 0em 1em;
    margin: 0em 1em 0em 1em;
    border-right:solid #888888 1px;
    background-color: #FFFFFF;
}

The border is in the left, and the text extends along the entire line. What is happening?

kaizen 1180533958|%e %b %Y, %H:%M %Z|agohover

the error was 'witdth'… >_< …well, thanks for the guys on the forum.

ajwak95 1184190710|%e %b %Y, %H:%M %Z|agohover

how do I add it to my wiki?!?!?!?!?!?!?!?!?!?!?

Re:

ks-robert 1202851453|%e %b %Y, %H:%M %Z|agohover

copy & paste :-)

Where do stylesheet definitions go?

shepster 1228781382|%e %b %Y, %H:%M %Z|agohover

So how does one add the style to a page? Normally I would put the CSS in a stylesheet. Where does one put the CSS information that applies to a page (as opposed to inline styles).