Is there a way in CSS to get elements to behave like the picture on the right? The order of the elements isn't that important, but the tiles need to occupy the space from the bottom-up rather than top-down as the person resizes the page.
NORMAL DESIRED
|---------| |---------|
| A B C D | | I |
| E F G H | | E F G H |
| I | | A B C D |
|---------| |---------|
Sample code:
<html>
<head>
<style>
.container {
margin:10px;
border:1px solid black;
float:left;
}
.tile {
width:100px;
height:100px;
border:1px solid black;
margin:5px;
float:left;
font-size: 50px;
text-align: center;
line-height: 100px;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="container-1" class="container">
<span class="tile">1</span>
<span class="tile">2</span>
<span class="tile">3</span>
<span class="tile">4</span>
<span class="tile">5</span>
<span class="tile">6</span>
<span class="tile">7</span>
<span class="tile">8</span>
<span class="tile">9</span>
</div>
</body>
</html>