Left and Right alignment using CSS

ul{text-align:right;margin:1em 0;padding:0}
ul li{display:inline;white-space:nowrap}
ul li.prev{float:left}
#content>ul{display:table;width:100%}
#content>ul li{display:table-cell}
#content>ul li.prev{float:none;text-align:left}
#content>ul li.next{text-align:right}

div.top{text-align:right;margin:1em 0;padding:0}
div.top div{display:inline;white-space:nowrap}
div.top div.left{float:left}
#content>div.top{display:table;width:100%}
#content>div.top div{display:table-cell}
#content>div.top div.left{float:none;text-align:left}
#content>div.top div.right{text-align:right}

HTML code used

<div id="content">
	<ul>
		<li class="prev"><a href="#">Previous: Chapter 4</a></li>
		<li class="next"><a href="#">Next: Chapter 6</a></li>
	</ul>

	<div class="top">
		<div class="left">Left aligned text</div>
		<div class="right">Right aligned text</div>
	</div>
</div>