Forums: Front End:

normally, i'd do this with tables and be all happy, but i'm trying to move away from tables.

I want to have a header that has a title on the left, and a page # on the right, thus:

TITLE                                                            page 4

Yes its perfectly possible in css.

However, don't shy away from tables when they are being used for the correct job - i.e. presenting tabulated data.

if using CSS your code might look something like this:

<style type="text/css">
<!--
.chapter {
	width: 600px;
	border-bottom: 1px dotted black;
}
.chaptertitle {
	text-align: left;
	width: 500px;
}
.pagenum {
	text-align: left;
	float: left;
	width: 100px;
}
-->
</style>

<div class="toc">
	<div class="chapter">
  		<div class="chaptertitle">Chapter 1</div>
 		<div class="pagenum">Page 1</div>
	</div>
	<div class="chapter">
		<div class="chaptertitle">Chapter 2</div>
  		<div class="pagenum">Page 8</div>
	</div>
</div>

Thanks, techno. What function does the 'toc' class server here? Must the two other divs be inside of a third div for this to work?

the .toc (my shorthand for table of contents) class, which I didn't defne in the css is just a containing div (which you could apply some styling to if you wanted)

yes, the 'chaptertitle' and 'pagenum' divs must be contained within the the 'chapter' div. Without the chapter' div then the divs would all try and line up in one lon row.

Think of the 'chapter' div as < tr > element and the 'chaptertitle' and 'pagenum' as < td > elements

my experience is that they all try to stack up in one tall column but, either way, i see what you're saying.

Thanks once again.

Normally that would be true but the 'float: left' is what is telling the '.pagenum' divs to line up on the same line as the 'chaptertitle' divs.