CSS/HTML Layout divs to fit in fixed-height div - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Layout

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

Description

CSS/HTML Layout divs to fit in fixed-height div

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!--from w w  w  . j  a  va  2  s  . c om-->
 <body> 
  <div style="background-color:#C1C1C1; height:300px; width: 350px; -webkit-column-count: 3;
    -webkit-column-gap: 25px; border: 1px solid black
"> 
   <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">
     Lorem 
   </div> 
   <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">
     Lorem 
   </div> 
   <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">
     Lorem 
   </div> 
   <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">
     Lorem 
   </div> 
   <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">
     Lorem 
   </div> 
   <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">
     Lorem 
   </div> 
   <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">
     Lorem 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials