antonydoyle
11/8/2013 - 10:30 AM
Creating Expandable Placeholders
Creating Expandable Placeholders
The div that has the style display:table; must also contain table-layout: fixed; otherwise the "cells" will not have equal width.
The div that contains the style display:cell; must also contain vertical-align:top; otherwise extra padding will appear at the top causing a misalignment of the cells
Don't use rows. For each new row use a table instead otherwise the "cells" will not scale to fit the available space if an irregular number is added on each row.<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>divs - tables - cells - Go</title>
<style>
h2 {
font-weight:100;
margin:0;
padding:0;
font-size:8em;
line-height:1em;
}
h3 {
font-family: Georgia, serif;
font-weight: normal;
font-style: italic;
font-size: 2em;
line-height: 1.5em;
border-bottom: dotted 1px #fff;
padding-bottom: 10px;
margin: 0;
}
p {
margin: 0;
padding: 10px 0;
line-height: 1.5em;
}
.table {
display: table;
height: 200px;;
width: 100%;
table-layout: fixed;
float: left;
border-collapse: collapse;
}
.cell {
display: table-cell;
padding: 10px;
vertical-align:top;
}
.row { display: table-row; }
.grey {
background-color: #666;
text-align: center;
font-size: 1em;
color: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
padding: 20px;
height:100%;
}
.random {
width: 300px;
float: left;
}
.wrapper {
float: left;
width: 800px;
}
</style>
</head>
<body>
<div class="table">
<div class="cell">
<div class="grey">
<h3>Far far away </h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the</p>
</div>
</div>
<div class="cell">
<div class="grey">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,</p>
</div>
</div>
<div class="cell">
<div class="grey"><h3>Cicero</h3><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt</p></div>
</div>
</div>
<div class="table">
<div class="cell">
<div class="grey"><h3>Li European Lingues</h3><p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in</p></div>
</div>
<div class="cell">
<div class="grey"><h3>Li European Lingues (En)</h3><p>The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in</p></div>
</div>
</div>
<div class="table">
<div class="cell">
<div class="grey"><h3>Cicero (En)</h3><p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system,</p></div>
</div>
<div class="cell">
<div class="grey"><h3>Werther</h3><p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm</p></div>
</div>
<div class="cell">
<div class="grey">
<h3>Kafka</h3> <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted</p>
</div>
</div>
<div class="cell">
<div class="grey"><h3>Pangram</h3><p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs.</p></div>
</div>
</div>
<div class="table">
<div class="row">
<div class="cell">
<div class="grey">
<h2>1</h2>
</div>
</div>
<div class="cell">
<div class="grey">
<h2>2</h2>
</div>
</div>
<div class="cell">
<div class="grey">
<h2>3</h2>
</div>
</div>
<div class="cell">
<div class="grey">
<h2>4</h2>
</div>
</div>
<div class="cell">
<div class="grey">
<h2>5</h2>
</div>
</div>
</div>
</div>
</body>
</html>