columnfill-auto-2.html (1275B)
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 bottom: 0px; 23 background-color: orange; 24 height: 120px; 25 column-width: 640px; 26 column-fill: auto; 27 column-gap: 0; 28 overflow-x: auto; 29 overflow-y: hidden; 30 } 31 32 #parent { 33 background-color: lightBlue; 34 position: absolute; 35 left: 0px; 36 bottom: 0px; 37 right: 0px; 38 height: 120px; 39 width: 70em; 40 } 41 </style> 42 </head> 43 <body> 44 <div id="parent"> 45 <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> 46 </div> 47 </body> 48 </html>