Here is a snapshot of my current layout:
<div class="left">
...
</div>
<div class="right">
<div class="inner" />
... several more of these ...
<div class="inner" />
</div>
My CSS code looks like this:
div { display: inline-block; }
.left { width: 25%; }
.right { width: 75%; }
.inner { width: 33%; }
I am aiming for the following design when the screen is at its original size:
+--+-----+
| |O O O|
| |O O O|
+--+-----+
When I decrease the browser's width, here is what I would like to see:
+--+---+
| |O O|
| |O O|
| |O O|
+--+---+
However, this is how it currently appears:
+--+
| |
| |
+--+
+-----+
|O O O|
|O O O|
+-----+
If I continue to shrink the browser window further, I want to avoid this scenario:
+--+
| |
| |
+--+
+---+
|O O|
|O O|
|O O|
+---+
Can this be accomplished?