title: CSS window width resize issues
body: <p>I am having problems with some content not fixed into one place when I resize the window on a browser, I basically have 3 <code>div id</code> box elements placed next to each other.</p>
  
  <p>They are positioned fine however when I resize the screen they seem to fall below one another.</p>
  
  <p>I have <code>min-width: 947px;</code> in the body of the CSS however this does not do anything.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id ="featured1"&gt;
  
  &lt;/div&gt;
  
  &lt;div id ="featured3"&gt;
  
  &lt;/div&gt;  
  
  &lt;div id ="featured2"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#featured1{
  
  
  float:left;
  font-family: 'Lobster13Regular';
  font-size:35px;
  color:#9c5959;
  margin-top:20px;
  margin-left:150px;
  border:1px solid black;
  width:250px;
  height:150px;
  
  }
  
  #featured2 {
  
  display: inline-block;
  font-family: 'Lobster13Regular';
  font-size:35px;
  color:#9c5959;
  margin-top:20px;
  border:1px solid black;
  width:250px;
  height:150px;
  } 
  
  #featured3 {
  float:right;
  font-family: 'Lobster13Regular';
  font-size:35px;
  color:#9c5959;
  margin-top:20px;
  
  border:1px solid black;
  width:250px;
  height:150px;
  margin-right:200px;
  
  } 
  </code></pre>
  
  <p>For some reason when I try resizing the screen with this code the elements fall below each other, I am looking for the content to completely remain the same and not resize at all.</p>