Curvelicious/ragged float: interesting technique, but why chop up the image?
Better to leave it as a single positioned image (low z-index), and use transparent shims (remember those?) to push the text around. That way you still get the image in one piece when the page is viewed without CSS. Geoff. > -----Original Message----- > From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] > Behalf Of Chris Blown > Sent: Friday, 13 May 2005 2:27 PM > To: WSG > Subject: RE: [WSG] Text flow and two bottom aligned floats? > > > Thanks Geoff > > I had that one in mind, I'll give it a go.. > > I had hope to get some CSS/P that would work across any page without > having to modify the images or position it in the text. > > I could chop the image horizontally ( see attachment ) a-la Meyer > curvelicious [1] > > Thanks > Chris > > [1] http://www.meyerweb.com/eric/css/edge/raggedfloat/demo.html > > On Fri, 2005-05-13 at 13:11, Geoff Pack wrote: > > Not sure if it's possible to do precisely. To get the text > to flow above and left means you will have to put the image > inline in the text, which means they will jump around a bit > depending on the font size and width of the text block. > > > > I got the following code to sort-of work by setting the > image heights to a multiple of the line-height, and setting a > fixed width. You have to fiddle with the placement of the > images in the text to make them line up at the bottom. Try > changing the text size in your browser - the images should > stay in the same place. > > > > <div style="width:24em; font-size:1em; line-height:1.5em;"> > > <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, > > sed diam nonumy eirmod tempor invidunt ut labore et dolore > > magna aliquyam erat, sed diam voluptua. Stet clita kasd > > nonumy eirmod tempor invidunt ut labore > > <img src="tall.gif" alt="" border="1" align="right" > style="float:right; width:6em; height:12em;"> > > et dolore magna aliquyam erat, sed diam voluptua. At vero > > eos et accusam et justo duo dolores et ea rebum. Stet > > clita kasd gubergren, no sea takimata sanctus est > > <img src="short.gif" alt="" border="1" align="right" > style="float:right; width:6em; height:6em;">Lorem ipsum dolor > sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, > > sed diam nonumy eirmod.</p> > > </div> > > > > > > cheers > > Geoff. > > > > > > > -----Original Message----- > > > From: [EMAIL PROTECTED] > [mailto:[EMAIL PROTECTED] > > > Behalf Of Chris Blown > > > Sent: Thursday, 12 May 2005 5:52 PM > > > To: WSG > > > Subject: [WSG] Text flow and two bottom aligned floats? > > > > > > > > > Just a quick question.. > > > > > > I am wondering what techniques people would use to layout a > > > paragraph of > > > text with two right floated images and have the text wrap > around the > > > images as shown. > > > > > > The main thing is the two images need to both be bottom > > > aligned to each > > > other ;) > > > > > > I have a couple of ideas, but they both seem quite a lot > of leg work > > > just to do something quite simple as flow some text > around a couple of > > > images. > > > > > > eg > > > > > > Heading > > > +---+ > > > text text text | | > > > text text text | | > > > text text +---+ | | > > > text text | | | | > > > text text +---+ +---+ > > > > > > This one is easy > > > > > > Heading > > > +---+ +---+ > > > text text | | | | > > > text text +---+ | | > > > text text text | | > > > text text text | | > > > text text text +---+ > > > > > > > > > > > > Chris > > > > > > ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
