title: css block within block float right
body: <p>Most embarassed to be coming to others for help with this if i'm honest, but i have reached my 1 1/2 hr sanity limit.</p>
  
  <p>I want to have a block (with a coloured border) postioned on the right of the page with width suitable to the text content + padding.  I want it to reserve the whole row for itself without other element below creeping into the space left on the left.</p>
  
  <p>I realised early on that any width = 100% would mean that the whole row would have the border rather then just the content I wanted and various experiments with float lead to the space on the left being occupied with elements creeping into the space from below.  To remedy i have created a containing block with 100% width and display = block and put the border round the child div.  Still doesn't work! I have the <code>#costblock</code> being the container and the <code>#costs</code> being the content:</p>
  
  <pre><code>#costsblock {
    display: block;
    width: 100%;  
  }
  
  #costs  {
    border: 1px solid #008eaf;
    padding: 10px 5px;
    width: auto;
    text-align: right;
  }
  
  &lt;div id="costsblock"&gt;
  &lt;div id="costs"&gt;The text&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have experimented with virtually all combinations of display and width and float on both the parent and the child and nothing works - I either get the whole row surrounded by the border or, if I dare to put a float: right anywhere at all then the space on the left gets filled wih elements creeping in from below.</p>
  
  <p>I think that I need to contrain the child width to what is necessary to hold the text only, but I can't seem to get that working!</p>