Floating div over other divs not working with z-index <p>Ok I am trying to build a website design. What I need to do is have two colored background divs and then float a white box in front of them. I have used z-index 0 for the background blocks and then z-index 5 for the block I want to float on top. I have also used position: relative. Does anyone know why this doesn't work. Here is my code:</p> <p>HTML:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;link rel="stylesheet" type="text/css" href="css/main.css"&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="page"&gt; &lt;div id="grey_block_left"&gt;&lt;/div&gt; &lt;div id="purple_block_right"&gt;&lt;/div&gt; &lt;div id="white_box_outer"&gt; float on top &lt;/div&gt; &lt;div id="footer"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>CSS:</p> <pre><code>@charset "utf-8"; * { list-style: none; text-decoration:none; padding: 0; margin: 0; } html { margin: 0 auto; width: 100%; min-width: 320px; } body { margin: 0; padding: 0; } #page { width: 100%; position: relative; z-index: 0; } #grey_block_left { width: 40%; background-color: #333333; min-height: 700px; float: left; position: relative; z-index: 0; } #purple_block_right { width: 60%; background-color: #9966cc; min-height: 700px; float: left; position: relative; z-index: 0; } #footer { width: 100%; background-color: #111111; min-height: 250px; float: left; position: relative; z-index: 0; } #white_box_outer { width: 70%; min-height: 450px; margin-left: 200px; position: relative; z-index: 5; float: left; background-color: #ccc; } </code></pre>