How can I position a SPAN to be aligned to either side and above a TABLE?

Question

<div>
<span>left</span>
<span>right</span>
<!-- new line break, so no more content on that line -->
<table> 
...
</table>
</div>

How can I position those spans (they can be changed to any element) so that depending on how big the table is (not defined anywhere, and shouldn't be) the spans are positioned just on top of the left side of the table and the right side of the table.

Example:

a    b
table0
table1
table2

(where a is the left span, and b is the right span)

P.S. You can change anything bar inner table html.

Answer 1

Doesn't place them relatively, nor does Rob Allen's answer, they put them at the far reaches of the browser not, within the table width.

Well they are going to be bound by their container width and Rob's answer makes both the table and container width 100%.

The only solution I can think of off hand is to put in a row in your table with a single column (spanning all columns) and in that row have your floated DIVs.

Answer 2

<style type="text/css">
    #wrapper, #top, #tableArea
     {
       width: 100%;
       padding: 10px;
       margin: 0px auto;
      }

     #top
      {
        padding: 0px;
      }

      #leftBox, #rightBox
      {
          margin: 0px;
          float: left;
          display: inline;
          clear: none;
       }

       #rightBox
        {
            float: right;
        }
     </style>
<div id="wrapper">
    <div id="top">
        <div id="leftBox">A</div>
        <div id="rightBox">b<</div>
    </div>
    <div id="tableArea">
        <table> ... </table>
    </div>
</div>

Answer 3

I ran into similar problem and I have found a solution. It doesn't depend on the width of the table but it is a little trickier. It works in every browser including IE5.5, IE6 and newer.

  <style>
  .tablediv {
  float:left; /* this is a must otherwise the div will take a full width of our page and this way it wraps only our content (so only the table)   */
  position:relative; /* we are setting this to start the trickie part */  
  padding-top:2.7em; /* we have to set the room for our spans, 2.7em is enough for two rows otherwise try to use something else; for one row e.g. 1.7em */
  }
  .leftspan {
  position:absolute; /* seting this to our spans will start our behaviour */
  top:0; /* we are setting the position where it will be placed inside the .tablediv */
  left:0;
  }
  .rightspan {
  position:absolute; 
  top:0; 
  right:0; 
  }
  </style>
<div class="tablediv">
 <span class="leftspan">Left text</span>
 <span class="rightspan">Right text <br /> with row</span>
  <table border="1">
   <tr><td colspan="3">Header</td></tr>
   <tr><td rowspan="2">Left content</td><td>Content</td><td rowspan="2">Right content</td></tr>
   <tr><td>Bottom content</td></tr>
  </table>
</div>
 <!-- If you don't want to float this on the right side of the table than you must use the clear style -->
 <p style="clear:both">
  something that continues under our tablediv
 </p>

If you can't use a float for some reason, than you can use an alternative .tablediv style which I found by a mistake. Just replace the float:left; to display:inline-block; This works in all modern browser but not in IE7 and below.

Now you get my point and I'm sure you find any other solutions. Just don't forget that the .tablediv will be as long as the inner content. So placing a paragraph into it will cause to stretch to a bigger size than our table.

Answer 4

if you have divs instead of span, try float:left for span a and float:right for span b

Answer 5

<div>
<div style="float:left">a</div><div style="float:right">b</div>
<br style="clear: both">
aaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
</div>

Doesn't place them relatively, nor does Rob Allen's answer, they put them at the far reaches of the browser not, within the table width.

Answer 6

I can't think of anyway, except to set the width of the table to something. In my case I choose 100%, which stretches to the width of the rapper at 50em:

<style type="text/css">
#wrapper {
    width: 1%;
    min-width:50em;
    padding: 10px;
}
#mainTable {
    width:100%;
}

#leftBox {
    float: left;
}

#rightBox {
    float: right;
}
</style>
<div id="wrapper">
    <div id="leftBox">A</div>
    <div id="rightBox">b</div>
    <br style="clear: both" />
    some text some text some text some text some text <br />
    some text some text some text some text some text <br />
    some text some text some text some text some text
    <table id="mainTable" border="1"><tr><td>test</td><td>test 2</td></tr></table>
</div>

Answer 7

@MattMitchell, you might have something there. And then just use fload: left and float right I assume?