Column-fill property with "auto" - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

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

Description

Column-fill property with "auto"

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

body{<!--   w  w w.  j  ava  2s  .c  om-->
   background-color:pink;
}
.livre{
   background-color: blue;
   border-left: 2px solid black;
   border-right: 2px solid black;
   position: relative;
}
.cahier{
   background-color:yellow;
   margin-left: 4%;
   margin-right: 4%;
   border-left: 1px solid grey;
   border-right: 1px solid grey;
   position: relative;
   min-height: 100vh;
   display: flex;
}
#tranche_g{
   width: 2%;
}
#feuillet{
   background-color:Bisque;
   border-left: 1px solid lightgrey;
   border-right: 1px solid lightgrey;
   box-sizing: border-box;
   width: 87%;
   padding-left: 1em;
   padding-right: 1em;
   /* Chrome, Safari, Opera */
   -webkit-column-count: 2;
   -webkit-column-gap: 2em;
   -webkit-column-rule: 1px solid;
   -webkit-column-fill: auto;
   /* Firefox */
   -moz-column-count: 2;
   -moz-column-gap: 2em;
   -moz-column-rule: 1px solid;
   -moz-column-fill: auto;
   /* Standard */
   column-count: 2;
   column-gap: 2em;
   column-rule: 1px solid;
   column-fill: auto;
}
#tranche_d{
   width: 10%;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="livre"> 
   <div class="cahier"> 
    <div id="tranche_g"> 
    </div> 
    <div id="feuillet"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum posuere orci nec imperdiet. Etiam erat sem, mollis non leo a, tincidunt posuere sapien. Cras fringilla venenatis aliquam. In euismod aliquet mi tincidunt condimentum. Donec metus lorem, tincidunt nec aliquet id, iaculis a elit. Fusce lectus justo, eleifend ut elit et, interdum finibus nisl. Mauris id enim porta, vulputate lectus a, sagittis eros. Curabitur in aliquam tortor. Sed a maximus est. Suspendisse enim massa, scelerisque vitae sagittis non, consectetur et velit. Vivamus placerat ligula a tortor efficitur mattis. Fusce eu arcu a metus rhoncus pretium in id elit. Nunc condimentum eleifend neque non vulputate. Integer varius scelerisque aliquam.</p> 
    </div> 
    <div id="tranche_d"> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials