title: CSS: width property is not working for div tags
body: <p>I am trying to create a Product catalog. I have planned to create multiple rows whereas in each row there would be 2 products each.</p>
  
  <p>Thus in each row the 1st product belongs to product-1 class and 2nd product belongs to product - 2 class.</p>
  
  <p>I have divided the page vertically into two parts using <code>float:left</code> and specified <code>width:50%</code> for both classes.</p>
  
  <p>And also for product-2 class I have specified <code>left:50%</code> (to push it to left)</p>
  
  <p>I have kept <code>display:block</code> , <code>position:relative</code> for both classes.</p>
  
  <p>But the <code>width</code> property seems to not be working.</p>
  
  <p>Code: <a href="https://jsfiddle.net/abhaygc/0pfygcbe/" rel="nofollow noreferrer">https://jsfiddle.net/abhaygc/0pfygcbe/</a></p>
  
  <p>Code Snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
    height: 100vh;
    margin: 0px;
    overflow: scroll;
   }
  .header{
  
    background-color: white;
    height:8%;
    overflow: hidden;
    font-style: "Roboto";
    font-size: 25px;
    border-bottom: 2px solid;
    border-bottom-color: #cccccc;
  }
  #clear{
    clear: both;
   }
  .logo{
   margin-top: 12px;
   float: left;
   left: 0px;
   padding-right: 50px;
  }
  #logo:hover{
   background: transparent;
  }
  .links{
   display: block;
   float: right;
   margin-right: 10px;
   margin-top: 10px;
  }
  a{
   position: relative;
   right: 0px;
   /*top: 25px;*/
  
   padding-left: 10px;
   padding-right: 10px;
  
   color:black;
   letter-spacing: 2px;
   font-weight: 200;
   text-decoration: none;
  }
  a:hover{
   background-color:#cccccc; 
  }
  
  .content{
   display: block;
   background-color: white;
   height: 92%;
   margin-top: 0px;
  
  }
  
  #clear{
   clear: both;
  }
  
  .image{
   display: block;
   width: 200px;
   height: 200px;
   border-style: dashed;
   border-color: red;
   border-width: 2px;
   overflow: hidden;
  }
  
  .product-1{
   display: block;
   position: relative;
   
   padding-left: 10%;
   padding-right: 10%;
   
   
   margin-top: 5%;
   
   float: left;
   left: 0px;
   width: 40%;
   overflow: hidden;
  
   border-style: solid;
   border-color: black;
   border-width: 1px;
  }
  
  .product-2{
   display: block;
   position: relative;
  
  
   padding-left: 10%;
   padding-right: 10%;
  
   
   margin-top: 5%;
  
   float: left;
  
   left: 50%;
   width: 50%;
   overflow: hidden;
  
   border-style: solid;
   border-color: black;
   border-width: 1px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;meta charset="utf-8"/&gt;
   &lt;link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'&gt;
   &lt;link rel="stylesheet" type="text/css" href="products.css"&gt;
   &lt;title&gt;Products&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;div class="header"&gt;
    &lt;div class="logo"&gt;
     &lt;a href="home.html"&gt;&lt;img id="logo"src="logo.png" alt="LOGO"&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="links"&gt;   
     &lt;a href="home.html"&gt;Home&lt;/a&gt;
     &lt;a href="products.html"&gt;Products&lt;/a&gt;
     &lt;a href="login.html"&gt;Login&lt;/a&gt;
     &lt;a href="register.html"&gt;Register&lt;/a&gt;
     &lt;a href="home.html"&gt;Contact&lt;/a&gt;
     &lt;a href="home.html"&gt;About&lt;/a&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="content"&gt;
    &lt;div class="product-1 product"&gt;
     &lt;div class="image"&gt;
       &lt;img src="slide-4.jpg" alt="Image 1" /&gt;
     &lt;/div&gt;
     &lt;div class="caption"&gt;
      
     &lt;/div&gt;
    &lt;/div&gt;
  
    
  
    &lt;div class="product-2 product"&gt;
     &lt;div class="image"&gt;
       &lt;img src="slide-5.jpg" alt="Image 2"/&gt;
     &lt;/div&gt;
     &lt;div class="caption"&gt;
      
     &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="clear"&gt;&lt;/div&gt;
  
    &lt;div class="product-1 product"&gt;
     &lt;div class="image"&gt;
       &lt;img src="slide-6.jpg" alt="Image 3"/&gt;
     &lt;/div&gt;
     &lt;div class="caption"&gt;
      
     &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="product-2 product"&gt;
     &lt;div class="image"&gt;
       &lt;img src="slide-5.jpg" alt="Image 4"/&gt;
     &lt;/div&gt;
     &lt;div class="caption"&gt;
      
     &lt;/div&gt;
    &lt;/div&gt;
  
   &lt;/div&gt;
  &lt;/body&gt;
  &lt;script type="text/javascript" src="products.js"&gt;&lt;/script&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>