jQtouch CSS Header Bar

Answer 1

How about some standard css? Somethink like this:

div.leftHeader
{
    float: left;
}
div.rightHeader
{
    float: right;
}
div.clear
{
    clear: both;
}

And then use this HTML code:

<div class="leftHeader">In</div>
<div class="rightHeader">Day/Week</div>
<div class="clear"></div>

Answer 2

shaiss,

I think using <table> selectors is the way to go.

In my opinion, your app is displaying tabular data. Therefore, I think "In" and "Day/Week" should be column headers. Use <th></th> instead of a <td></td> to define header cells. You need to wrap <th> in <tr></tr> and <thead> and <tbody> are optional:

<table>
  <thead>
    <tr><td>col1</td><td>col2</td></tr>
  </thead>
  <tbody>
    <tr><td>data1</td><td>data2</td></tr>
  </tbody>
</table>

Then you can position the <th> with the "In" like so:

thead th.left
{
  text-align: left;
}​

Full source code here: http://jsfiddle.net/g3MKj/

Of course, something like Jan Aagaard's code could work for you. But just for the sake of learning, another way to accomplish the same thing in CSS is:

span.absolute-right
{
    position:absolute;
    right:0;
    margin-right:10px;
}

HTML:

<span>In</span>
<span class="absolute-right">Day/Week</span>

I have this example, and Jan Aagaard's, plus another example using position:relative here: http://jsfiddle.net/L7fTp/