title: 404 Error on CSS files in Flask
body: <p>I'm trying to style some elements on my Flask-based web site, but for some reason my css files never get loaded. </p>
  
  <p>The situation is peculiar though; the files will load fine when called from <code>layout.html</code> with the path <code>/static/css/</code>, but for some reason the page truncates the path to <code>/css/</code> on the second time around and generates a <code>404</code> error. </p>
  
  <p>This is the structure of my Flask project:</p>
  
  <pre><code>Directory Structure:
  
  +app
  +static
      +css
          style-large.css
          style.css
          style-xlarge.css
  +templates
      index.html
      layout.html
  </code></pre>
  
  <p>Snippet of <code>layout.html</code>:</p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;{% block doc_title %} {% endblock %}&lt;/title&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
      &lt;meta name="description" content="" /&gt;
      &lt;meta name="keywords" content="" /&gt;
      &lt;!--[if lte IE 8]&gt;&lt;script src="css/ie/html5shiv.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
      &lt;script src="{{ url_for('static', filename='js/jquery.min.js') }}"&gt;&lt;/script&gt;
      &lt;script src="{{ url_for('static', filename='js/skel.min.js') }}"&gt;&lt;/script&gt;
      &lt;script src="{{ url_for('static', filename='js/skel-layers.min.js') }}"&gt;&lt;/script&gt;
      &lt;script src="{{ url_for('static', filename='js/init.js') }}"&gt;&lt;/script&gt;
  
  
      &lt;link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/skel.css') }}" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style-xlarge.css') }}" /&gt;
      &lt;!-- &lt;link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}" /&gt; --&gt;
      &lt;!--[if lte IE 8]&gt;&lt;link rel="stylesheet" href="css/ie/v8.css" /&gt;&lt;![endif]--&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>The peculiarity is this; no matter how I change the url to the files <code>steyl-large.css</code>, <code>style.css</code>, and <code>style-xlarge.css</code>, I always get a <code>404</code> error that looks like this:</p>
  
  <pre><code>127.0.0.1 - - [05/Dec/2015 17:34:20] "GET /static/css/style-xlarge.css HTTP/1.1" 304 -
  127.0.0.1 - - [05/Dec/2015 17:34:20] "GET /static/css/style.css HTTP/1.1" 304 -
  127.0.0.1 - - [05/Dec/2015 17:34:20] "GET /css/style-large.css HTTP/1.1" 404 -
  127.0.0.1 - - [05/Dec/2015 17:34:20] "GET /css/style.css HTTP/1.1" 404 -
  127.0.0.1 - - [05/Dec/2015 17:34:20] "GET /css/style-xlarge.css HTTP/1.1" 404 -
  </code></pre>
  
  <p>The first two requests, the ones resulting in a <code>304</code> code work fine and render almost everything on my page, but the ones right after it don't. </p>
  
  <p>I'm not sure why this is happening. I think this may be the cause of why elements on my page are not being styled, but I don't know why it is happening.</p>