Left and Right alignment using CSS


CSS tables are the proper tool for this job, unfortunately poor old IE doesn't support them. IE is therefore fed a hack using a float, however using floats for alignment suffers from a number of nasty drawbacks (overlapping content when the window width isn't wide enough, or vertical displacement). By using this method, at least these drawbacks remain confined to poor old IE.


Left aligned text text text text text text text
Right aligned text text text text text text text

CSS code used

ul{text-align:right;margin:1em 0;padding:0}
ul li{display:inline;white-space:nowrap}
ul li.prev{float:left}
#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 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">
<li class="prev"><a href="#">Previous: Chapter 4</a></li>
<li class="next"><a href="#">Next: Chapter 6</a></li>

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