columnfill-auto-3.html (1262B)
1 <!doctype html> 2 <html> 3 <head> 4 <link rel="stylesheet" type="text/css" href="ahem.css" /> 5 <style> 6 html { 7 line-height: 1.5; 8 font-family: ahem; 9 } 10 11 body { 12 margin: 0; 13 padding: 0; 14 } 15 16 #test { 17 padding: 5px 0px 0px 10px; 18 position: absolute; 19 left: 500px; 20 right: 0px; 21 top: 0px; 22 background-color: orange; 23 max-height: 120px; 24 column-width: 640px; 25 column-fill: auto; 26 column-gap: 0; 27 overflow-x: auto; 28 overflow-y: hidden; 29 } 30 31 #parent { 32 background-color: lightBlue; 33 position: absolute; 34 left: 0px; 35 bottom: 0px; 36 right: 0px; 37 height: 120px; 38 width: 70em; 39 } 40 </style> 41 </head> 42 <body> 43 <div id="parent"> 44 <div id="test">To Mrs. Aville, England St. Petersburgh, Dec. 11th, 17- You will rejoice to hear that no disaster has accompanied the commencement of an enterprise which you have regarded with such evil forebodings. I arrived here yesterday; and my first task is to assure my dear sister of my welfare, and increasing confidence in the success of my undertaking. I am already far north of London; and as I walk in the streets of Petersburgh. I feel a cold northern breeze play upon my cheeks, which braces my nerves, and fills me with delight.</div> 45 </div> 46 </body> 47 </html>