CSS Floating Right and Bottom — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

CSS Floating Right and Bottom

This page's ID: 11041

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	I think there are two problems with the initial example. First, the paragraphs floated right appear after the paragraph of text which is supposed to wrap. I believe order is important here. The text will not wrap around objects that occuring later in the document, only objects occurring before. Moon Shadow's examples showed that by moving the paragraphs before (or inside) the text paragraph caused wrapping to work although not as intended. The second problem is the use of relative position. In experimenting with the example, I noticed that the text did wrap but not at the locations which the right-floated-paragraphs appeared. It seems the browser honors the wrapping (float) according to where the paragraphs would appear if presented in the natural order. Since relative positioning takes the object out of the normal layout, things don't work. (If you think about it, this is probably as should be. Most times we want objects to overlap and this is what relative positioning is often used for.) In looking at Eric Meyer's examples, I thought it might be possible to achieve the desired effect using horizontally stacked right-floated paragraphs, since relative positioning could not be used. This sample [url=http://jove.prohosting.com/dcalhoun/floattest2.html]here[/url] comes close to achieving the effect. It works well in Opera 7, but in IE 6 and Netscape 7, some of the text overwrites (or underwrites) the right-floated paragraphs. I believe this may have to do with the bounding box with the smallest 'top' value taking precedence. I think that if the size and position of the paragraphs were chosen to coincide with the line height of the text, the line wrapping would work as desired. Alternately, tweaking the margins could work as well. While the right-floated paragraphs stick well to the right side of the browser, I have not discovered a way to get it to stick to the bottom of the page. This means that when resizing the browser, there will be some point at which the text will flow around and under the graphics. But if there is some reasonable minimum width beyond which the user is unlikely to use when viewing the page, and the text and graphic layout works down to this minimum width, it could work. [This message has been edited by MajorFracas (edited 09-03-2003).] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu