title: How to create a simple responsive layout with navigation and image gallery?
body: <p>I have a problem with my code. My task is to create an image gallery that is responsive. And I am not good enough in CSS. I search for another tutorials and I apply it with my code. I am creating a 4 column image gallery of products. And beside the gallery is a simple navigation menu. So I have 2 columns. One is for sidebar and second is the gallery. Here's my sample code.</p>
  
  <p>In my CSS i have this</p>
  
  <pre><code>.menu_navigation {
  
      position: relative;
      float: left;
      width: 20%;
      height: 100%;
      border-style: solid;
      border-color: red;
      border-width: 2px;
  }
  
  .product_selection: {
  
      position: absolute;
      left: 1px;
      right: 1px;
      top: 1px;
      bottom: 1px;
      padding: 10px;
      color: #000000;
  
  } 
  
  .product_image {
      height: 100;
      width: 100;
  }
  
  #wrap {
      overflow: hidden;
      margin: 10px;
  }
  
  .box {
      width: 20%;
      padding-left: 10%;
      padding-bottom: 30%;
      color: #FFF;
      position: relative;
      float: left;
  }
  
  .innerContent {
      position: absolute;
      left: 1px;
      right: 1px;
      top: 1px;
      bottom: 1px;
      background: #FFF;
      padding: 5px;
  
  }
  </code></pre>
  
  <p>In my HTML I have this</p>
  
  <pre><code>&lt;div class="page" id="wrap"&gt;
  
  &lt;!-- navigation categories --&gt;
  &lt;div class="menu_navigation"&gt;
  
      &lt;ul class="menu" style="padding: 10px"&gt;
          &lt;li&gt;
              &lt;a href=""&gt;DISPLAY FORMAT&lt;/a&gt;
              &lt;ul class="sub_category"&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;USUAL&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;SMALL&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;SHADED&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;SHIRT&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href=""&gt;COLOR&lt;/a&gt;
              &lt;ul class="sub_category"&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;BLACK&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;WHITE&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;BLUE&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;BROWN&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;GREEN&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;RED&lt;/a&gt;&lt;/li&gt;
               &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href=""&gt;PATTERN&lt;/a&gt;
              &lt;ul class="sub_category"&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;USUAL&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;SMALL&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;SHADED&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;SHIRT&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href=""&gt;PRICE&lt;/a&gt;
              &lt;ul class="sub_category"&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;$49&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;$59&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;$69&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;$79&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;$89&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href=""&gt;BRAND&lt;/a&gt;
              &lt;ul class="sub_category"&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;CANCLINI&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;FINEST ORIGINAL FABRICS&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;T. MASON&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href=""&gt;TYPE OF PATTERN&lt;/a&gt;
              &lt;ul class="sub_category"&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;OXFORD&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;DOBBY&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;DOBBY STRIPE&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;PINPOINT OX&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;&lt;input type="checkbox" /&gt;OTHERS&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  
  &lt;/div&gt;
  
  &lt;!-- /navigation categories --&gt;
  
  &lt;!-- product --&gt;
  
  &lt;div class="product_selection"&gt;
  
      &lt;div class="box"&gt;
          &lt;div class="innerContent"&gt;
              &lt;img src="./images/website_sample2_04.jpg" class="product_image" /&gt;
              &lt;div class="item_label"&gt;#&lt;/div&gt;
              &lt;div class="item_value"&gt;1-KK00&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="box"&gt;
          &lt;div class="innerContent"&gt;
              &lt;img src="./images/website_sample2_04.jpg" class="product_image" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="box"&gt;
          &lt;div class="innerContent"&gt;
              &lt;img src="./images/website_sample2_04.jpg" class="product_image" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="box"&gt;
          &lt;div class="innerContent"&gt;
              &lt;img src="./images/website_sample2_04.jpg" class="product_image" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="box"&gt;
          &lt;div class="innerContent"&gt;
              &lt;img src="./images/website_sample2_04.jpg" class="product_image" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="box"&gt;
          &lt;div class="innerContent"&gt;
              &lt;img src="./images/website_sample2_04.jpg" class="product_image" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="box"&gt;
          &lt;div class="innerContent"&gt;
              &lt;img src="./images/website_sample2_04.jpg" class="product_image" /&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="box"&gt;
          &lt;div class="innerContent"&gt;
              &lt;img src="./images/website_sample2_04.jpg" class="product_image" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="box"&gt;
          &lt;div class="innerContent"&gt;
              &lt;img src="./images/website_sample2_04.jpg" class="product_image" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="box"&gt;
          &lt;div class="innerContent"&gt;
              &lt;img src="./images/website_sample2_04.jpg" class="product_image" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt; 
  </code></pre>
  
  <p>Here's the sample result</p>
  
  <p><a href="http://jsfiddle.net/rochellecanale/2jrvL/embedded/result/" rel="nofollow">http://jsfiddle.net/rochellecanale/2jrvL/embedded/result/</a></p>
  
  <p>Here's the fiddle </p>
  
  <p><a href="http://jsfiddle.net/rochellecanale/2jrvL/" rel="nofollow">http://jsfiddle.net/rochellecanale/2jrvL/</a></p>
  
  <p>Th image gallery should be 4 columns only. That's all guys I hope you can help me.</p>