Verschiebungen durch jScrollPane

[tykee]

Hallo,
kämpfe nun seit einigen Stunden mit ein und demselben Problem und finde einfach keine Lösung dafür, weder selbst noch im WWW.

Ich arbeite gerade an einer Homepage, die sehr minimalistisch sein soll. Vorab einmal eine Erklärung des Aufbaus: die Seite besteht aus einer linken und einer rechten Seite, beide identisch groß. Beide Seiten besitzen ein in etwa 500px großes Quadrat - links befindet sich dort eine Grafik, rechts ist der Content. Über dem rechten Quadrat ist zudem die Navigation angesetzt. Der Teil, der mir nun Probleme macht, ist der Content-Teil.

Zunächst entsteht durch ein DIV das 496px große Quadrat. Da der Inhalt allerdings nicht bis an den Rand stoßen soll und zudem scrollbar sein soll, habe ich untergeordnet ein weiteres DIV gesetzt mit den jeweiligen margin Angaben zum Rand. Fülle ich nun den inneren Part, funktioniert auch alles wie gewünscht. Selbst wenn es schließlich dazu kommt, dass soviel Inhalt in dem inneren Teil besteht, dass er scrollbar wird, funktioniert noch alles.
Da die Seite nun allerdings sehr minimalistisch sein soll und für mich als Designer die Standard OS Scrollbalken natürlich total das Layout verhunzen, habe ich mich auf die Suche nach einer Alternative gemacht und bin dabei auf die Scrollbalken von Kelvin Luck gestoßen (http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html). Für mich die perfekte Lösung.

Ich habe also alles eingebaut und rein theoretisch funktioniert es auch, allerdings habe ich folgendes Problem: das Javascript setzt nun vor dem inneren Part noch ein DIV mit den Größenangaben des inneren Parts und verändert die des inneren. Gehört offenbar zur Funktionsweise des Scriptes. Da der innere Part aber die genannten margin Angaben hat, um nicht am Rand zu kleben, verschiebt sich jetzt alles sehr unschön, da diese Angaben beim inneren Part bleiben.

Zum einfacheren Verständnis hänge ich noch einmal ein paar Grafiken sowie ein Teil des Codes an...

So soll es aussehen.
So sieht es aus.
Screenshot.

#wrap {
width:1018px;
margin:100px auto;
}

#navi {
width:1018px;
height:48px;
color:#fbfaf8;
}

#navi-links {
width:496px;
height:48px;
color:#fbfaf8;
float:left;
}

#navi-rechts {
width:496px;
height:48px;
color:#fbfaf8;
float:right;
}

#main {
width:1018px;
height:496px;
}

#links {
width:496px;
height:496px;
text-align: left;
background-image:url(img/grafik.jpg);
background-repeat:no-repeat;
background-color:#ffffff;
float:left;
}

#mitte {
width:26px;
height:496px;
text-align: left;
background-color:#ffffff;
}

#rechts {
width:496px;
height:496px;
text-align: left;
background-color:#ffffff;
float:right;
margin: 0px;
}

#content {
position: absolute;
width:416px;
height:392px;
overflow-y:auto;
margin: 68px 40px 36px;
}

<?php get_header(); ?>

<div id="main">
<div id="links"></div>
<div id="rechts"><div id="content" class="scroll-pane">
<?php if (have_posts()) : ?>

		<?php while (have_posts()) : the_post(); ?>
		
		<?php the_content(); ?>
		
	<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>	
		
	<!-- End Featured Post -->

<?php endwhile; else : ?>

<!-- Not found here -->

<?php endif; ?>
</div></div>
</div>

Ich hoffe, damit lässt sich was anfangen...

Übrigens hätte ich eine Lösung, wie es richtig angezeigt wird mit aktiviertem Javascript. Leute ohne Java würden es dann aber nicht korrekt angezeigt bekommen. (Meine Vorstellung war eigentlich, dass die Leute ohne Java halt einfach nur auf den schönen Scrollbalken verzichten müssen)

Danke! Lg, tykee