Skip to content

Instantly share code, notes, and snippets.

@GeorgeTzellis
Created July 23, 2012 16:01
Show Gist options
  • Save GeorgeTzellis/3164406 to your computer and use it in GitHub Desktop.
Save GeorgeTzellis/3164406 to your computer and use it in GitHub Desktop.
CSS Regions experiment 3
/* CSS Regions experiment 3 */
#source { flow-into: prose;} /* #sources push their content into */
#source2 { flow-into: prose;} /* the named flow 'prose', */
.region { flow-from: prose;} /* then .region pulls from prose */
#region_1, #region_2 {
float: left;
height: 600px; /* % values are buggy */
background: lightblue;
}
#region_1 {
width: 145px;
}
#region_2 {
width: 146px;
margin-left: 10%;
}
blockquote {
position:absolute;
height: 200px;
width: 50%;
left: 25%;
top: 35%;
wrap-flow: both; /* exclude surrounding content */
wrap-padding: 20px;/* the content doesn't touch the box's edges */
color: lightblue;
font-size: 2em;
}
<div id="source">
<p>Lorem ipsum dolor sit amet, ex vis magna mandamus. At mei decore scribentur, his natum blandit et. Et omnium invenire quaerendum eos, dicat quaestio omittantur an nam. Probo impedit ex vel, qui in case iudicabit vituperata. At his partem admodum, mea eu amet viris, nam ea probo copiosae intellegat.</p>
<p>Mel fugit cotidieque at, dicam dolore consulatu ea est. Mel detracto nominavi aliquando an, cu est euismod praesent. Mea ut accusam erroribus, est ad percipit euripidis. Paulo doming no cum, sed ad vidit interesset.</p>
<p>Ut posse vivendum per, eu eam eius tempor iisque. Qui dicta laoreet consequuntur ne. Duo at ludus repudiare, pro verterem pertinax principes ea. Te sit adipisci quaerendum, ea per malis fastidii. Mundi iriure mea ne, verear vivendum an vim, nostrum noluisse quaerendum ea mei. Sit noluisse molestiae ne.</p>
</div>
<div id="source2">
<p>Et dolores copiosae legendos est. Et habeo prompta vim, qui alii iuvaret an. Nam no nisl prompta. Qui no enim consul tritani, in usu putant vocent, qui at habemus efficiantur concludaturque.</p>
<p>Adhuc mundi has ut. Ad mei nibh persecuti delicatissimi, te sed nonumy timeam temporibus. Errem voluptaria eam ea, vix legimus accumsan ullamcorper ad. Ut vel recusabo erroribus, et pro iisque dolorum. Ei quot vidisse sea, duo ad simul nullam.</p>
<p>Nec quis dolorum te, esse nonumy mel eu. Eius latine deleniti ex mea. Summo fastidii principes nec id. Sea ea blandit consectetuer, ea amet posidonium has. Duo an oporteat splendide voluptatibus, sanctus hendrerit nec in, mel an liberavisse interpretaris.</p>
<p>Ei mei rebum alterum consequuntur. Ullum vidisse at pro, munere definiebas vim eu. Vis ad tollit corrumpit. Laoreet omittantur comprehensam eum cu, suas urbanitas cu eum, rebum viderer pri ei. Te epicurei lucilius insolens vis, at est justo novum corpora. Ne mollis voluptaria quo, meis vivendo atomorum mel no, ea vim nisl probo efficiantur.<p>
</div>
<div id="region_1" class="region"></div>
<div id="region_2" class="region"></div>
<blockquote>Lorem ipsum dolor sit amet, ex vis magna mandamus. At mei decore scribentur, his natum blandit et. Et omnium invenire quaerendum eos, dicat quaestio omittantur an nam. Probo impedit ex vel, qui in case iudicabit vituperata. At his partem admodum, mea eu amet viris, nam ea probo copiosae intellegat.
</blockquote>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment