Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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

How to: Text Wrap Using Partial CSS Grid


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Jan 25, 2013, 07:27 PM
jerryc
 
367 posts · Oct 2012
Florida
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.

Code:
.float-right-wrap
{ 
float: right;
padding: 1em 0 0 1em;
}
Attached Thumbnails
Click image for larger version

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

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

Bookmarks

Tags
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 03:21 PM.


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