title: CSS: Align an element based on screen size
body: <p>So I'm writing a program that will need to resize elements based on the viewers screen size. The program is in jsp / sql/ xhtml / css and I have a few questions.</p>
  
  <p>Is there any way to select a css file by saving the screen width to a jsp variable?</p>
  
  <p>Is there a way to align a div below another div and use the above div as a sort of container for it?   This question is a little complicated</p>
  
  <p>Goal: To have an image with a text label underneath it.  Problem: The div is part of a parent div, and the div serves an image that will changed based on the screen size.</p>
  
  <p>Here's something like what I'm doing.</p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div id="inner"&gt;
      &lt;div class="1"&gt;--stuff&lt;/div&gt;
      &lt;div class="2"&gt;&lt;img src="server:8080/project?minutes=720&amp;width=&lt;%= out.print(width) %&gt; &lt;/div&gt; &lt;-- want to align under this
      &lt;div class="3"&gt;--stuff&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="label"&gt; &lt;--Want this div aligned underneath "2"
      &lt;div class="1"&gt;2.0&lt;/div&gt; &lt;-- Want the text at 25% of the image (right)
      &lt;div class="2"&gt;4.0&lt;/div&gt; &lt;-- Want the text at 50% of the image (right)
      &lt;div class="3"&gt;6.0&lt;/div&gt; &lt;-- Want the text at 75% of the image (right)
      &lt;div class="4"&gt;8.0&lt;/div&gt; &lt;-- Want the text at 100% of the image (right)
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>