Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

How to: Text Wrap Using Partial CSS Grid

Old Jan 25, 2013, 07:27 PM
367 posts · Oct 2012
Montezuma's CSS grid system is based upon 12 units. The documentation and most all of the related posts stress to
  1. Always have your col div units in any row add up to 12 and,

  2. 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.

float: right;
padding: 1em 0 0 1em;
Attached Thumbnails
Click image for larger version

Name:	float-right-div.gif
Views:	1203
Size:	5.6 KB
ID:	2193  

Last edited by jerryc; Feb 3, 2013 at 08:30 PM.


css, float, grid, text wrap, wrap text

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
Text doesn't wrap around iframe ItalDave Center area post/pages 0 Feb 9, 2011 07:32 PM
Cannot wrap text around a widget in IE carter_coleman Plugins & Atahualpa 5 Dec 19, 2010 03:28 PM
Tearing out hair over getting text to wrap around image Meg Center area post/pages 10 Oct 27, 2010 01:56 PM
What's the easiest way to wrap text around image in a page? digeorge Center area post/pages 17 Jul 21, 2010 09:23 PM
[SOLVED] How to wrap the text around a picture ireneeng Forum How-To 2 Oct 20, 2009 09:07 PM

All times are GMT -6. The time now is 11:07 PM.

Powered by vBulletin® Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.