Re: [css-d] Positioning a float

2011-01-27 Thread Dan Kaufman 
This looks like a great solution. I can't wait to use it myself.

However, it appears to be a case (for me on my browsers) of IE doing the job
asked for and Chrome not quite. A reversal of my normal experience.

In IE 8 on Windows it works great. But in Google Chrome (also on Windows) I
am seeing the text at the tops of the (orange) images half-overlapped by the
image--as if there were more padding needed on the tops of the images.

While not always the best solution, I often give up fighting with IE and
write a separate IE css file to "adjust things back to where I need them"
and just include that in the  with an IE conditional comment wrap,
such as:





-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of "G.Sørtun"
Sent: Thursday, January 27, 2011 9:51 AM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Positioning a float


> I need the in-flow, wrapping properties of a float combined with the
positioning properties of an absolutely-positioned element.
>
> Is anyone aware of a way of achieving that?

You may be able to adapt the method shown here...
<http://www.satzansatz.de/cssd/tmp/floatspacer.html>
...for the line-up and appearance you describe: a float positioned at 
the bottom with text wrapping around it.

regards
 Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Positioning a float

2011-01-27 Thread G.Sørtun 



I need the in-flow, wrapping properties of a float combined with the 
positioning properties of an absolutely-positioned element.

Is anyone aware of a way of achieving that?


You may be able to adapt the method shown here...

...for the line-up and appearance you describe: a float positioned at 
the bottom with text wrapping around it.


regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Positioning a float

2011-01-27 Thread Bobby Jack 
--- On Thu, 1/27/11, Gabriele Romanato  wrote:

> You cannot position and float an
> element at the same time. So:
> 
> 1. make the container relative
>     position: relative
> 
>    Thus you create a context.
> 
> 
> 2. position the box with the image at the bottom, using
>     left/right: 0 bottom: 0
> 
> 3. add some top and left margin to the positioned box to
> prevent surrounding text from overlapping it.
> 
>     if your container has no background image,
> you can use borders instead of margins, with the same color
> of the background of your container.
> 
> 
> Let me know if this helped. :-)

Unfortunately, no. Since the image is positioned, the text alongside it will 
not wrap accordingly, as the image is no longer in the normal flow. This is 
regardless of whether the image has width/height, margins, borders, or any 
other box-model related attribute.

- Bobby
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Positioning a float

2011-01-27 Thread Philip Taylor (Webmaster, Ret'd) 



Bobby Jack wrote:


I'm working on a layout that requires text to wrap around a positioned image. 
In my case, I need an image in the bottom-right of a box, with text inside the 
box. So I need the in-flow, wrapping properties of a float combined with the 
positioning properties of an absolutely-positioned element.

Is anyone aware of a way of achieving that?


I wish there were.  Over a year ago I asked about positioning
an image at the end of a stretch of text, so that the text
would wrap around it and the last line of the text would
align with the bottom of the image (the image itself should
float right).  Although there were several replies, none
actually solved the problem as posed. This seems pretty
close to your requirement, so I will watch with interest
to see if anyone can today identify a real solution.

Philip Taylor
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Positioning a float

2011-01-27 Thread Gabriele Romanato 

You cannot position and float an element at the same time. So:

1. make the container relative
position: relative

   Thus you create a context.


2. position the box with the image at the bottom, using
left/right: 0 bottom: 0

3. add some top and left margin to the positioned box to prevent  
surrounding text from overlapping it.


if your container has no background image, you can use borders  
instead of margins, with the same color of the background of your  
container.



Let me know if this helped. :-)


http://www.css-zibaldone.com
http://www.css-zibaldone.com/test/  (English)
http://www.css-zibaldone.com/articles/  (English)
http://onwebdev.blogspot.com/  (English)








__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Positioning a float

2011-01-27 Thread Bobby Jack 
Hi all,

I'm working on a layout that requires text to wrap around a positioned image. 
In my case, I need an image in the bottom-right of a box, with text inside the 
box. So I need the in-flow, wrapping properties of a float combined with the 
positioning properties of an absolutely-positioned element.

Is anyone aware of a way of achieving that?

Regards,

- Bobby
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/