title: Is it possible to group a set of html elements so that they move together?
body: <p>When the browser size is changed/on different sized devices, I need a set of html elements that are all semantically related to remain together and move in a block. That is, if one of the elements move to the next "row" due to their not being enough width to contain the whole grouping, ALL of it should move down.</p>
  
  <p>IOW, this is sort of like the "keep together" attribute that some groupings of items in a word processing document have.</p>
  
  <p>To be a little more specific, say that I have collections of the following elements: </p>
  
  <pre><code>1) an anchor tag, filling out a first "column"
  2) a collection of tags, to the right of the anchor tag, consisting of:
  (a) a div, followed by a &lt;br/&gt;
  (b) a cite, followed by a &lt;br/&gt;
  (c) another div, followed by a &lt;br/&gt;
  (d) two or three anchor tags that are aligned side-by-side at the bottom of the second "column"
  </code></pre>
  
  <p>So to sum up, if there is not enough room for the second "column" in a "row," rather than keep the  in the first "column" and moving the elements in the second column down to the next "row," the  in the first column should adhere to its siblings and always remain on the same "row" with them (I'm putting "row" and "column" in quotes because I'm not using an html table, and those exist only in a virtual sense).</p>
  
  <p>If you're finding this a little hard to visualize (I don't blame you), check out the fiddle: <a href="http://jsfiddle.net/W7CYC/8/" rel="noreferrer">http://jsfiddle.net/W7CYC/8/</a></p>
  
  <p>Note: wrapping the groupings into html5 s did not help.</p>
  
  <p>Here's the code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="yearBanner"&gt;2013&lt;/div&gt;
  &lt;section&gt;
  &lt;a id="mainImage" class="floatLeft" href="https://rads.stackoverflow.com/amzn/click/com/0299186342" rel="nofollow noreferrer"&gt;&lt;img height="240" width="160" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg"&gt;&lt;/a&gt;
  
      &lt;div id="prizeCategory" class="category"&gt;BIOGRAPHY&lt;/div&gt;
      &lt;br/&gt;
  &lt;cite id="prizeTitle" class="title"&gt;Son of the Wilderness: The Life of John Muir&lt;/cite&gt;
  
      &lt;br/&gt;
      &lt;div id="prizeArtist" class="author"&gt;Linnie Marsh Wolfe&lt;/div&gt;
      &lt;br/&gt;
      &lt;img class="floatLeft" height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg"&gt;
      &lt;img class="floatLeft" height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg"&gt;
      &lt;img class="floatLeft" height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg"&gt;
  &lt;/section&gt;
  &lt;section&gt;
  &lt;a class="floatLeft" href="https://rads.stackoverflow.com/amzn/click/com/0299186342" rel="nofollow noreferrer"&gt;&lt;img height="240" width="160" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg"&gt;&lt;/a&gt;
  
      &lt;div class="category"&gt;BIOGRAPHY&lt;/div&gt;
      &lt;br/&gt;
  &lt;cite class="title"&gt;Son of the Wilderness: The Life of John Muir&lt;/cite&gt;
  
      &lt;br/&gt;
      &lt;div class="author"&gt;Linnie Marsh Wolfe&lt;/div&gt;
      &lt;br/&gt;
      &lt;img height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg"&gt;
      &lt;img height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg"&gt;
      &lt;img height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg"&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      background-color: black;
  }
  .floatLeft {
      float: left;
      padding-right: 20px;
      padding-left: 5px;
  }
  .yearBanner {
      font-size: 3em;
      color: white;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      float: left;
      padding-top: 64px;
  }
  .category {
      display: inline-block;
      font-family: Consolas, sans-serif;
      font-size: 2em;
      color: Orange;
      width: 160px;
  }
  .title {
      display: inline-block;
      font-family: Calibri, Candara, serif;
      color: Yellow;
      width: 160px;
  }
  .author {
      display: inline-block;
      font-family: Courier, sans-serif;
      font-size: 0.8em;
      color: White;
      width: 160px;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('#prizeCategory').text("Changed Category");
  $('#prizeTitle').text("Changed Title that spans two rows");
  $('#prizeArtist').text("Changed Author and co-author");
  $('#mainImage img').attr("src", "http://ecx.images-amazon.com/images/I/61l0rZz6mdL._SY300_.jpg");
  $('#mainImage img').attr("height", "200");
  </code></pre>