Three divs side by side responsive - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Responsive Layout

Description

Three divs side by side responsive

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
.wrapper {<!--from   ww w . j  ava 2 s. c o m-->
   width:1181px;
   margin:0 auto;
   position:relative;
}

.portfolio {
   margin:100px auto 39px auto;
}

.portfolio ul {
   list-style-type:none;
   overflow:hidden;
   margin-left:-63px;
}

.portfolio ul li {
   float:left;
   margin-left:63px;
   margin-bottom:63px;
   position:relative;
   display:block;
   overflow:hidden;
   width:332px;
   height:335px;
}

.portfolio ul li .portfolio_item img {
   width:100%;
   height:auto;
}

@media screen and (max-width: 1180px)  {
   .wrapper {
      width:100%;
   }
   
   .portfolio ul {
      margin-left:-6.25423728813560%;
   }
   
   .portfolio ul li {
      margin-left:6.25423728813560%;
      margin-bottom:6.25423728813560%;
      width:30.83050847457628%;
      height:auto;
   }

}

@media screen and (max-width: 500px)  {
   .portfolio ul {
      text-align:center;
      margin:0 auto;
   }
   
   .portfolio ul li {
      margin-bottom:6.25423728813560%;
      width:91%;
      height:auto;
      float:none;
   }

}
</style> 
 </head> 
 <body translate="no"> 
  <section class="portfolio"> 
   <div class="wrapper"> 
    <ul> 
     <li> 
      <div class="portfolio_item"> 
       <img class="img-responsive" src="https://www.java2s.com/style/demo/InternetExplorer.png" alt=""> 
       <div class="portfolio_title"> 
        <h3>Lore</h3> 
       </div> 
       <!-- end portfolio_title  !--> 
      </div> 
      <!-- end portfolio_item  !--> </li> 
     <!-- end li !--> 
     <li> 
      <div class="portfolio_item"> 
       <img class="img-responsive" src="https://www.java2s.com/style/demo/InternetExplorer.png" alt=""> 
       <div class="portfolio_title"> 
        <h3>Lorem </h3> 
       </div> 
       <!-- end portfolio_title  !--> 
      </div> 
      <!-- end portfolio_item  !--> </li> 
     <!-- end li !--> 
     <li> 
      <div class="portfolio_item"> 
       <img class="img-responsive" src="https://www.java2s.com/style/demo/Safari.png" alt=""> 
       <div class="portfolio_title"> 
        <h3>Lorem</h3> 
       </div> 
       <!-- end portfolio_title  !--> 
      </div> 
      <!-- end portfolio_item  !--> </li> 
     <!-- end li !--> 
    </ul> 
    <!--  end ul  !--> 
   </div> 
   <!--  end wrapper  !--> 
  </section> 
  <!--  end section portfolio  !-->  
 </body>
</html>

Related Tutorials