Created
January 11, 2012 16:26
-
-
Save iamvdo/1595465 to your computer and use it in GitHub Desktop.
Untitled
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.container { | |
font-size: small; | |
width: 98%; | |
height: 100%; | |
display: -ms-grid; | |
-ms-grid-columns: 1fr 1fr 1fr; | |
-ms-grid-rows: 1fr 1fr 1fr; | |
} | |
.exclusion { | |
-ms-grid-row: 2; | |
-ms-grid-column: 2; | |
background-color:lime; | |
-ms-wrap-side: both; | |
float:-ms-positioned; | |
padding: 10px; | |
-ms-wrap-margin: 15px; | |
} | |
.dummy_text { | |
-ms-grid-row: 1; | |
-ms-grid-column: 1; | |
-ms-grid-column-span: 3; | |
-ms-grid-row-span: 3; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<div class="exclusion"> | |
Exclusion positioned at row 2, column 2.</div> | |
<div class="dummy_text"> | |
<p>Lorem | |
ipsum dolor sit amet, consectetur adipiscing elit. Maecenas convallis | |
mollis feugiat. Mauris volutpat dui odio, nec aliquet tortor. Cras sed | |
enim justo, sit amet dignissim eros. Fusce et metus et diam vulputate | |
suscipit ac non sem. Class aptent taciti sociosqu ad litora torquent per | |
conubia nostra, per inceptos himenaeos. Suspendisse in nulla sed libero | |
faucibus sagittis vitae a dolor. Quisque lacinia eros orci. Duis | |
interdum lobortis tellus, non congue orci venenatis quis. Donec semper | |
quam non augue scelerisque et commodo nisl lacinia. Phasellus malesuada | |
dolor mollis massa ultrices id ultricies erat malesuada. Maecenas | |
malesuada molestie vulputate.</p> | |
<p>Praesent | |
nec mi arcu. Cras eu nulla nec arcu blandit iaculis. Morbi felis urna, | |
mollis vitae pharetra non, faucibus nec diam. Cras placerat sagittis | |
tincidunt. Cras malesuada laoreet felis, id tempus lacus placerat sit | |
amet. Etiam tempor condimentum tortor eget elementum. Aenean eget orci | |
risus. Proin sagittis posuere nisl sed accumsan. Lorem ipsum dolor sit | |
amet, consectetur adipiscing elit. Curabitur ligula sem, luctus in | |
elementum quis, convallis ac dui. Phasellus dolor tortor, suscipit vitae | |
consequat eu, fringilla vel metus. In pulvinar nunc vitae lacus commodo | |
facilisis. Vestibulum facilisis lacus sit amet eros cursus eget | |
suscipit lorem euismod. Nunc eu ante est.</p> | |
<p>Duis | |
ut tortor non nulla hendrerit scelerisque. Nunc sem neque, bibendum a | |
scelerisque in, imperdiet luctus lorem. Vivamus libero erat, pharetra eu | |
vulputate in, tristique quis eros. Nullam diam velit, sollicitudin quis | |
lacinia non, pharetra et justo. Nullam vel lectus luctus tellus varius | |
rhoncus. Vestibulum gravida ultrices ipsum sollicitudin aliquam. Nulla | |
facilisi. Cras metus eros, varius at vulputate nec, consequat vitae | |
nibh. Fusce vel orci tellus, et semper mi. Duis diam risus, varius vel | |
lacinia quis, tristique dictum enim. Vivamus condimentum viverra velit, | |
nec tempor felis placerat quis. Maecenas porta, tortor eu placerat | |
tincidunt, neque tortor mollis lectus, ut euismod libero lorem sed | |
lorem. Nulla sodales dignissim nulla, eu sodales eros malesuada ut.</p> | |
<p>Nulla | |
vel metus at urna elementum dictum quis at urna. Maecenas urna est, | |
euismod eu laoreet id, sagittis sed nulla. Curabitur sed sapien in elit | |
interdum placerat eget sit amet nisi. Phasellus ultricies varius | |
ultrices. Maecenas libero nibh, pulvinar nec placerat sed, fringilla | |
quis magna. Vivamus consectetur lorem at diam viverra ut fringilla quam | |
ornare. Ut sed pretium lorem. In et ante vitae sapien volutpat vehicula | |
ac ac tortor. Maecenas aliquam iaculis rhoncus. Suspendisse quis augue | |
eget sem scelerisque tempor blandit auctor est. Suspendisse purus magna, | |
ultricies ac semper eget, euismod eget dolor. Vivamus rutrum, leo at | |
rhoncus eleifend, metus dolor pulvinar tortor, sed laoreet nulla lectus | |
at tellus. Cras pharetra pulvinar elit nec lobortis. Curabitur ac | |
sollicitudin neque. Cum sociis natoque penatibus et magnis dis | |
parturient montes, nascetur ridiculus mus.</p> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split-vertical","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment