title: Can't float a span inside of a div
body: <p><strong>UPDATE 2:</strong></p>
  
  <p>I can't float a span inside of a div.. </p>
  
  <pre><code>&lt;div class="noselect" id="teach_create_pageheader"&gt;
  &lt;span class="teach_create_pageheader_back"&gt;&lt;/span&gt;
     Step 1
  &lt;span class="teach_create_pageheader_forward"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my css. I want them to float left and float to right accordingly.</p>
  
  <pre><code>#teach_create_pageheader{
  width:880px;
  height: 30px;
  margin: -10px;
  padding-top: 5px;
  background-color: gray;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  opacity:0.8;
  filter:alpha(opacity=80);
  }
  
  .teach_create_pageheader_back{
      float: left;
      margin-bottom: 5px;
  }
  
  .teach_create_pageheader_forward{
      float: right;
      margin-bottom: 5px;
  }
  
  span {
  display: block;
  }
  </code></pre>
  
  <p>And I have JQuery making the buttons (as well as others) with this code:</p>
  
  <pre><code>(function($){
  
  // Creating the jQuery plugin:
  $.fn.sweetPages = function(opts){
  
  // If no options were passed, create an empty opts object
  if(!opts) opts = {};
  
  var resultsPerPage = opts.perPage || 3;
  
  // The plugin works best for unordered lists, althugh ols would do just as well:
  var ul = this;
  var li = ul.find('li');
  
  li.each(function(){
      // Calculating the height of each li element, and storing it with the data method:
      var el = $(this);
      el.data('height',el.outerHeight(true));
  });
  
  // Calculating the total number of pages:
  var pagesNumber = Math.ceil(li.length/resultsPerPage);
  
  // If the pages are less than two, do nothing:
  if(pagesNumber&lt;2) return this;
  
  // Creating the controls div:
  var swControls = $('&lt;div class="swControls"&gt;');
  
  for(var i=0;i&lt;pagesNumber;i++)
  {
      // Slice a portion of the lis, and wrap it in a swPage div:
      li.slice(i*resultsPerPage,(i+1)*resultsPerPage).wrapAll('&lt;div class="swPage" /&gt;');
  
      // Adding a link to the swControls div:
      swControls.append('&lt;a href="" class="swShowPage"&gt;'+(i+1)+'&lt;/a&gt;');
  }
  
  ul.append(swControls);
  
  var maxHeight = 0;
  var totalWidth = 0;
  
  var swPage = ul.find('.swPage');
  swPage.each(function(){
  
      // Looping through all the newly created pages:
  
      var elem = $(this);
  
      var tmpHeight = 0;
      elem.find('li').each(function(){tmpHeight+=$(this).data('height');});
  
      if(tmpHeight&gt;maxHeight)
          maxHeight = tmpHeight;
  
      totalWidth+=elem.outerWidth();
  
      elem.css('float','left').width(ul.width());
  });
  
  swPage.wrapAll('&lt;div class="swSlider" /&gt;');
  
  // Setting the height of the ul to the height of the tallest page:
  ul.height(maxHeight);
  
  var swSlider = ul.find('.swSlider');
  swSlider.append('&lt;div class="clear" /&gt;').width(totalWidth);
  
  var hyperLinks = ul.find('a.swShowPage');
  
  hyperLinks.click(function(e){
  
      // If one of the control links is clicked, slide the swSlider div 
      // (which contains all the pages) and mark it as active:
  
      $(this).addClass('active').siblings().removeClass('active');
  
      swSlider.stop().animate({'margin-left':-(parseInt($(this).text())-1)*ul.width()},'slow');
      e.preventDefault();
  });
  
  // Mark the first link as active the first time this code runs:
  hyperLinks.eq(0).addClass('active');
  
  // Center the control div:
  swControls.css({
      'left':'50%',
      'margin-left':-swControls.width()/2
  });
  
  return this;
  
  }})(jQuery);
  
  
  $(document).ready(function(){
  /* The following code is executed once the DOM is loaded */
  
  // Calling the jQuery plugin and splitting the
  // #holder UL into pages of 3 LIs each:
  
  $('#holder').sweetPages({perPage:1});
  
  // The default behaviour of the plugin is to insert the 
  // page links in the ul, but we need them in the main container:
  
  var controls = $('.swControls').detach();
  controls.appendTo('#main');
  
  
  
  function swGotoPage(page){
        $('.swShowPage:contains("' + page + '")').click();
  }
  
  var baseFB = '&lt;input type="button" class="swFB" /&gt;';
  var offset = 'pgOffset';
  var active = '.swShowPage.active';
  
  var $pgBack = $(baseFB)
      .attr('id', 'button_back')
      .attr('value', "Back")
      .attr(offset, '-1');
  
  var $pgForward = $(baseFB)
      .attr('id', 'button_forward')
      .attr('value', "Forward")
      .attr(offset, '1');
  
  $.each([$pgBack, $pgForward], function(i,$obj){
      $obj.click(function(){
          var nextPage =  parseInt($(active).text(), 10) + parseInt($(this).attr(offset), 10);
          swGotoPage(nextPage);
      });
  });
  
  
  $($pgForward).addClass("teach_create_backforward");
  $($pgBack).addClass("teach_create_backforward");
  
  $('#teach_create_pageheader_back').replaceWith($pgBack);
  $('#teach_create_pageheader_forward').replaceWith($pgForward);
  
  });
  </code></pre>