How to: Text Wrap Using Partial CSS Grid

jerryc · #1 Jan 25, 2013, 08:27 PM

Montezuma's CSS grid system is based upon 12 units. The documentation and most all of the related posts stress to

Always have your col div units in any row add up to 12 and,
Wrap each group of col divs in a row div.

However, by intentionally violating these rules, you can make text wrap around a div.

In the example, the text is wrapped around an image, but anything can be put in the div. If you adjust your browser window size, you'll see both the text and the image adjust.

This technique uses nested percentage grids. It will work differently if you use fixed width grids, and that is not recommended.

Here's the applicable code for the example:

HTML Code:

<div class="float-right-wrap col4"><img src = "[image lurl]" ... /></div>

It is not surrounded by row divs. It's just there, all by itself, in the content (but it could be in a template, too). The floated div takes up 1/3 of the content area, because that's what MZ's col4 does (although it's typically used to take up 1/3 of the page), with no change to its CSS.

MZ col divs usually float left. With a little extra CSS, they can also float right, and the text will be on the left. Here's that CSS, which gives some padding between the image and the text and a little at the top.

Code:

.float-right-wrap
{ 
float: right;
padding: 1em 0 0 1em;
}