WIP: Magazine like unordered list inline-block version

dabblet.css

/**
 * WIP: Magazine like unordered list inline-block version
 */


* {
	padding: 0;
	margin: 0;
}
body {
	font-family: verdana, sans-serif;
	font-size: 11px;
}
ul {
	list-style-type: none;
	list-style-position: outside;
}
li {
	text-align: right;
	display:block;
	clear: both;
	position: relative;
	background-color: #FFFF00;
	overflow: hidden;
	margin: 10px 0;
}
li h4 {
	font-size: 7em;
	display: inline-block;
	vertical-align: bottom;
	width: auto;
	max-width: 47%;
	padding-left: 3%;
	background-color: #FF0000;
	white-space: nowrap;
}
li div {
	display: inline-block;
	vertical-align: bottom;
	width: 50%;
	max-width: 50%;
	min-height: 7em;
	position: relative;
	background-color: #00FF00;
}
li div p {
	width: 100%;
	text-align: right;
	display: inline-block;
	vertical-align: bottom;
	background-color: #0000FF;
}
#sezione {
	display: block;
	background-color: #FF00FF;
}

dabblet.html

<ul id="listaDate">
		<li class="a1928">
			<h4>1928</h4>
			<div><p>In 1928 the Montaldo Brothers began manufacture heating, cooking, lighting and welding products. The company started in a small garage in the centre of Turin. The company was called Fratelli Montaldo (Montaldo Brothers).</p></div>
		</li>
		<li>
			<h4>1937</h4>
			<div><p>Thanks to the skill and the talent of the founders after a few years the range of products increased and they became the market leader in Italy, producing innovative products. During the thirties thanks to their design and quality, the products were shown at the most important International trade fairs and the company began to export into Europe. In 1937 a new factory was built in Turin. New pressing and drilling machines and assembly lines were used to increase the production capacity. Thanks to the skill and the talent of the founders after a few years the range of products increased and they became the market leader in Italy, producing innovative products. During the thirties thanks to their design and quality, the products were shown at the most important International trade fairs and the company began to export into Europe. In 1937 a new factory was built in Turin. New pressing and drilling machines and assembly lines were used to increase the production capacity.</p></div>
			
		</li>
		<li class="sfumatura">
			<h4>'40</h4>
			<div><p>In the forties the products were sold across Europe,
			Africa and the Middle East to a total of 57 countries. Some products, thanks to their innovative design received important awards at International Trade fair.</p></div>
		</li>
		<li>
			<h4>1955</h4>
			<div><p>In 1955 one of the founders dreamed of (divine) providence (Providus in Latin) and the PROVIDUS trade mark was created whilst the company kept the old name of Fratelli Montaldo. Within a few years the PROVIDUS brand became more and more popular around the world and the shareholders decided to rename the company PROVIDUS S.p.A. Progressively with the advent of the LPG (Liquefied Petroleum Gases) the products were developed to work with the new fuel rather than with paraffin or petrol.</p></div>			
		</li>
		<li>
			<h4>end '50</h4>
			<div><p>At the end of the fifties, the Montaldo Brothers sold the company, and the firm began its new phase of “internationalization” aiming to export all over the world.</p></div>
		</li>
		<li class="sfumatura">
			<h4>1989</h4>
			<div><p>In 1989 the factory moved to Collegno, a small city close to Turin, where a new warehouse was constructed.</p></div>
		</li>
		<li class="sfumatura">
			<h4>end 20th</h4>
			<div><p>At the end of 20th century a new division was created to produce gas cartridges and bottles and the company traded with all the largest worldwide manufacturers and worldwide distributors of welding and camping products. Products are now sold in over 90 countries on all 5 continents.</p></div>
		</li>
		<li>
			<h4>2007</h4>
			<div><p>In 2007 Providus joined the Campweld Group.</p></div>
		</li>
		<li>
			<h4>Today</h4>
			<div><p>In 2009, 81 years after its foundation the new PRO Center plant was built with around 10.000 sqm. of production area and 35.000 sqm. of land. The production line is now fully automated with the packaging line and the products are shipped all around the world from the new Logistics Center.</p></div>
		</li>
	</ul>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}