Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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

How to: Text Wrap Using Partial CSS Grid


  #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:	2171
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 10:00 AM.


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