title: CSS Formatting to Keep Together
body: <p>Having a heck of a time with getting this formatting correct so any ideas would be appreciated.  we have a bunch of information pertaining to <em>foos</em> that we want to keep grouped together.  So if we had a bunch of <em>foos</em> listed next to each other, if that element causes the <em>foos</em> to wrap, the entire <em>foo</em> would stay together.  Also the formatting should look like:  So the text is to the left and the numbers are to the right.</p>
  
  <pre><code>|-----------------------------------------------------|
  |[icon] Brad (human)              [pic] (2)  [pic] (3)|
  |-----------------------------------------------------|
  </code></pre>
  
  <p>So the main icon is leftmost then the name and model, and then right aligned is the siblings , and kids (with css embedded icons for each).</p>
  
  <p>Each <em>foo</em> can have the following:</p>
  
  <pre><code>foo.id = 12345
  foo.name = 'brad'
  foo.model = 'human'
  foo.image = ''
  foo.kids = 3
  foo.siblings = 2
  foo.link = ''
  </code></pre>
  
  <p>-</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
  &lt;head&gt;
  &lt;title&gt;none&lt;/title&gt;
  &lt;style type="text/css" &gt;
  
  body
  {
      margin:         0;
      padding:        0;
      min-width:      850px;
      text-align:     left;
      line-height:    28px;
      font-size:      14px;
      font-family:    Verdana,Tahoma,Arial;
  }
  
  #content
  {
  width:          800px;
  border:         solid 1px #000000;
  margin-top:     20px;
  margin-left:    auto;
  margin-right:   auto;
  }
  
  div.foo
  {
  display:  inline;
  min-width:  250px;
  width:   250px;
  border:   dotted 1px #b8b8b8;
  padding:  0px 15px 0px 0px;
  vertical-align: middle;
  }
  
  .foo .id
  {
  display:  none;
  }
  
  .foodata
  {
      display:  inline;
      text-align:  left;
      white-space: nowrap;
      margin:   2px 2px 2px 2px;
  }
  
  
  .fooname
  {
      display:  inline;
      min-width:  80px;
      font-weight: bold;
      font-size:  12px;
      white-space: nowrap;
  }
  
  .foomodel
  {
      display:  inline;
      min-width:  80px;
      color:   #000000;
      font-size:  12px;
  }
  
  .foocounts
  {
      min-width:   90px;
      text-align:   right;
      display:   inline;
  }
  
  .foosiblings
  { /* add in image for children */
      background:   url(../../images/siblings.png) no-repeat 4px 10%;
      text-align:   right;
      font-size:   12px;
      min-width:   50px;
      display:   inline;
  }
  
  .fookids
  { /* add in image for connection */
      background:   url(../../images/kids.png) no-repeat 4px 25%;
      text-align:   right;
      font-size:   12px;
      min-width:   50px;
      display:   inline;
  }
  
  .fooimage
  {
      display:   inline; 
      vertical-align:  middle;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="content" &gt;
  &lt;div class="foo" &gt;
      &lt;span class="id" &gt;12345&lt;/span&gt;
      &lt;a href="" class="foolink" &gt;
          &lt;img src="" alt="XX" class="fooimage" height="16" width="16" /&gt;
          &lt;span class="foodata" &gt;
              &lt;span class="fooname" &gt;Brad&lt;/span&gt;
              &lt;span class="foomodel" &gt;(human)&lt;/span&gt;
          &lt;/span&gt;
          &lt;span class="foocounts" &gt;
              &lt;span class="foosiblings" &gt;(3)&lt;/span&gt;
              &lt;span class="fookids" &gt;(2)&lt;/span&gt;
          &lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="foo" &gt;
      &lt;span class="id" &gt;12345&lt;/span&gt;
      &lt;a href="" class="foolink" &gt;
          &lt;img src="" alt="XX" class="fooimage" height="16" width="16" /&gt;
          &lt;span class="foodata" &gt;
              &lt;span class="fooname" &gt;Tom&lt;/span&gt;
              &lt;span class="foomodel" &gt;(human)&lt;/span&gt;
          &lt;/span&gt;
          &lt;span class="foocounts" &gt;
              &lt;span class="fookids" &gt;(1)&lt;/span&gt;
          &lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="foo" &gt;
      &lt;span class="id" &gt;12345&lt;/span&gt;
      &lt;a href="" class="foolink" &gt;
          &lt;img src="" alt="XX" class="fooimage" height="16" width="16" /&gt;
          &lt;span class="foodata" &gt;
              &lt;span class="fooname" &gt;Harry&lt;/span&gt;
              &lt;span class="foomodel" &gt;(human)&lt;/span&gt;
          &lt;/span&gt;
          &lt;span class="foocounts" &gt;
              &lt;span class="foosiblings" &gt;(6)&lt;/span&gt;
          &lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="foo" &gt;
      &lt;span class="id" &gt;12345&lt;/span&gt;
      &lt;a href="" class="foolink" &gt;
          &lt;img src="" alt="XX" class="fooimage" height="16" width="16" /&gt;
          &lt;span class="foodata" &gt;
              &lt;span class="fooname" &gt;Sally&lt;/span&gt;
              &lt;span class="foomodel" &gt;(human)&lt;/span&gt;
          &lt;/span&gt;
          &lt;span class="foocounts" &gt;
          &lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="foo" &gt;
      &lt;span class="id" &gt;12345&lt;/span&gt;
      &lt;a href="" class="foolink" &gt;
          &lt;img src="" alt="XX" class="fooimage" height="16" width="16" /&gt;
          &lt;span class="foodata" &gt;
              &lt;span class="fooname" &gt;Peggy&lt;/span&gt;
              &lt;span class="foomodel" &gt;(human)&lt;/span&gt;
          &lt;/span&gt;
          &lt;span class="foocounts" &gt;
              &lt;span class="fookids" &gt;(12)&lt;/span&gt;
              &lt;span class="foosiblings" &gt;(16)&lt;/span&gt;
          &lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The important part is I want to keep the entire <em>foo</em> together, in one big chunk since I use this structure all over the page.  If needed the structure of the <em>foo</em> can change, I have complete control over it.</p>