Sidebar Example

From Facebook Developer Wiki

Jump to: navigation, search

This is an example of how to render a sidebar on the right-hand side, similar to app about pages. It is taken from my Quote Book app. Oh, and it includes my preferred box-model hack. Which is the reason for the double divs.

<div style='width:175px;background:#EEEEEE;float:right;'>
<div style='width:155px;margin:10px;'>
	<!-- Sidebar Content Here -->
	<div style='clear:both;font-weight:bold;background:#F7F7F7;border:1px solid #CCCCCC;margin:10px;text-align:center;padding:5px;'>
		<span style="line-spacing:110%;">Actions</span><br/>
		<a href='$appurl/favorite.php?qid=$qid'><img src='$serverurl/images/fav_big.png' style='border:none;margin:0px;'></a>
		<a href='$appurl/delete.php?qid=$qid'><img src='$serverurl/images/delete_big.png' style='border:none;margin:0px;'></a>
		<a href='$appurl/edit.php?qid=$qid'><img src='$serverurl/images/edit_big.png' style='border:none;margin:0px;'></a>
	</div>
	<div style='clear:both;' />
</div>
</div>
<div style='padding:20px;'>
<div style='width:425px;float:left;'>
	<!-- Main Content Here -->
</div>
</div>
reference