title: HTML/CSS: How do I make right floats go to the top instead of floating at the position where they were when they were inline?
body: <p>For example, on this page you see 3 images that are <code>float:right</code> inside the <code>.container</code> that has a red border:
  <a href="http://cis.scc.losrios.edu/~cisw320b_stu022/sccwa-snapshot1/" rel="nofollow">http://cis.scc.losrios.edu/~cisw320b_stu022/sccwa-snapshot1/</a></p>
  
  <p>The images start halfway down because that is where they were initially placed with respect to the content on the left.</p>
  
  <p>How can I make them go all the way to the top without (with CSS preferably)?</p>
  
  <p><strong>EDIT 11/8/2011 4:06pm:</strong> Try resizing your browser to make it smaller and smaller and you'll see that the images get placed inline. That is because as the size of the browser shrinks, the float:right property is removed so that the images go inline into the same spot as they are in the code. I can't simply put the <code>&lt;aside&gt;</code> elements before all the <code>&lt;p&gt;</code> elements because then when you shrink your browser the images will no longer be in the correct positions.</p>
  
  <p><strong>EDIT 11/8/2011 4:11pm:</strong> So basically I want it so when the window is smaller, all the asides appear in their correct inline positions, but when the browser window is bigger, all the images should appear on the right side as if they were in a sidebar on the right.</p>
  
  <p>Is this possible with CSS?</p>
  
  <p><strong>EDIT 11/8/2011 4:16pm:</strong> The website is supposed to shrink on purpose. Try resizing your browser so it is the width of an iPhone or an Android. The <code>&lt;aside&gt;</code> elements appear inline where they should. But when the browser is full size on a desktop, I want the <code>&lt;aside&gt;</code> elements to float on the right, starting from the top.</p>
  
  <p>Is this possible with CSS, or do I have to use Javascript?</p>