Topic: CSS Floating Right and Bottom Pages that link to <a href="https://ozoneasylum.com/backlink?for=11041" title="Pages that link to Topic: CSS Floating Right and Bottom" rel="nofollow" >Topic: CSS Floating Right and Bottom\

 
Author Thread
Allura
Obsessive-Compulsive (I) Inmate

From:
Insane since: Aug 2003

IP logged posted posted 08-31-2003 04:21 Edit Quote

I'm having a huge problem trying to get my content to wrap around floated elements. Normally I just used CSS for color, but I'm getting into using it for layout as well. Here's the page that's giving me grief, rather crude and all inline for the sake of sample simplicity.

I also have an image of what the basic back of the site should look like (it's really low quality for obvious reasons). The boxes just a series of images that make up two large images. I had to cut them so as not to make one huge box that the content flowed around, leaving too much white space and appearing as an obvious square. If I float the bottom boxes, as I did the top, they all line up at their tops, misaligning the image. If I add the position specifications, however, they all line up properly, as seen in the site example.

The problem is, with the way I have it coded now, the content does what it's supposed to around the top boxes, but it pushes the bottom boxes down, leaving white space to the left. If I float them without the position specifications, the content flows below it, breaking that part of the image away from the bottom. Is there any way I can make this content do what it's supposed to? I'm about to resort to just smacking it around for a while.

I would really appreciate any suggestions at all, even if it's "just change the design 'cause that's impossible". I'm going insane here! Thanks so much.

Allura
Eggs come from cows.

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 08-31-2003 05:04 Edit Quote

I've faced this same problem before and found no solution. =(

So I'd be glad to know if anyone else has a solution...

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 08-31-2003 05:15 Edit Quote

Allura: Interesting problem. I'd recommen you look at Eric Meyer's work esp.:
www.meyerweb.com/eric/css/edge/slantastic/demo.html

and:
www.meyerweb.com/eric/css/edge/curvelicious/demo.html
www.meyerweb.com/eric/css/edge/raggedfloat/demo.html
www.meyerweb.com/eric/css/edge/slantastic/holiday.html

However, I think as you have a vertical feature going on it might be more tricky - I'd suggest your problem might be fixed by playing with the height settings although I'm not quite sure how that will work.

Pos. try constraining the height of the box with height: auto or something........

I'll have a think about this and see what springs to mind.

[edit: And curse my manners!! I never said welcome ]

___________________
Emps

FAQs: Emperor

Moon Shadow
Paranoid (IV) Inmate

From: Rouen, France
Insane since: Jan 2003

IP logged posted posted 08-31-2003 17:43 Edit Quote

You know what ? It's been two hours I've worked on it, and I believe it is quite impossible because of the system of coordinates used on the web.

It works very well at the top of the page. The <p> accumulate, each one right to the former one, and with the decreasing height, the seeked effect is reached.

However, at the bottom right of the page, it can't work like that. Set to "float: right", the <p> accumulate from the right, but, like at the top of the page, they always start at the same height. To solve it, you used "position: relative; top 25px" (for example). It indeed shifts the <p> at the wished place, but the fact is that your <p> is still created at the same height, and therefore, the text don't wrap around your first <p>, but is stopped at your last <p>.

Indeed, if you try to remove the relative position you'll see that the text will wrap correctly, but the <p> won't be well placed.

I tried to hack this problem with different means, such as replacing "position: relative; top: 25px" by "margin-top: 25px", but after several tries I came to the conclusion that it was impossible (for me) to place correctly these layers without using a reference point. But I'm surely wrong, some gods around here probably have an idea on how you can do this trick




[This message has been edited by Moon Shadow (edited 08-31-2003).]

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 08-31-2003 18:16 Edit Quote

MS: Just off the top of my head but couldn't you use something like?:

code:
position: relative; 
bottom: 0px;
right: 0px;



___________________
Emps

FAQs: Emperor

Moon Shadow
Paranoid (IV) Inmate

From: Rouen, France
Insane since: Jan 2003

IP logged posted posted 08-31-2003 18:54 Edit Quote

I already tried and it didn't work : It seems the <p> are placed just at the bottom of the first line, as if the first text line was interpreted as the bottom of the element.

Example


I also tried with negative values, but then the text is hidden behind the <p> elements.

Example


Moreover, I asked a friend about it to see how it worked under IE, and obviously Opera and IE in these examples don't place the <p> elements at the same height.


And fiddling with "auto" hasn't worked either. There is something I don't understand whith this float on the right, and this is an interesting research, therfore I'll keep working on it, or I'll try to find a workaround.

[This message has been edited by Moon Shadow (edited 08-31-2003).]

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 08-31-2003 19:06 Edit Quote

MS: Have you tried using other blokc level elements? Specifically DIV? The paragraph tag is a funny beast and fiferent browsers treat it differntly whicle the DIV seems more 'neutral'. Anyway bon chance

___________________
Emps

FAQs: Emperor

Moon Shadow
Paranoid (IV) Inmate

From: Rouen, France
Insane since: Jan 2003

IP logged posted posted 08-31-2003 22:11 Edit Quote

I tried with DIVs as well... But I didn't manage to do something better, pity.

Anyway, I'll come back to school tomorrow. Away from my home all the week. Which means you won't see me here a lot anymore now. So well... Good luck to the ones who will try to solve this baffling problem.

See you later pals

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 08-31-2003 22:40 Edit Quote

MS: Thanks for giving it a hot - I suspect it might prove difficult/impossible to do but that doesn't mean we shouldn't try

Oh and have fun at school

___________________
Emps

FAQs: Emperor

Allura
Obsessive-Compulsive (I) Inmate

From:
Insane since: Aug 2003

IP logged posted posted 09-01-2003 03:55 Edit Quote

Thanks so much to everyone who tried to help. I really appreciate all the work you put into it. I've been working for hours myself, trying different elements, using the techniques on the Meyer website, and just trying to modify everything to be at least partly usable. If I want that design, it looks like I'll have to wait until there's a right-bottom position for elements other than backgrounds. For a while I thought I had something, but simply resizing the browser window messed up the whole thing.

Again, I want to thank everyone for their help. I'll probably have to just make the bottom part of the design smaller so the white space won't be so huge. That could be better though; less graphics to load. Just leave it to me to pick an impossible layout for my first CSS website.

Oh, and thanks for the welcome! This is the friendliest, most helpful board I've seen. And you all reply so quickly!

Allura
Eggs come from cows.

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 09-01-2003 20:16 Edit Quote

Allura: Well we are just happy to help with such an interesting problem - we love challenges

Pity we couldn't actually be much help

Anyway I'm sure people will have a quick tinker with this and see what they can come up with. If that doesn't work don't be shy about emailing Eric Meyer and pointing him to this thread - I'm sure he'll love the challenge too (or he'll be sticking pins in my voodoo doll - I'm not sure which although I hear he is big on voodoo so........ ).

___________________
Emps

FAQs: Emperor

rickindy
Nervous Wreck (II) Inmate

From: Indianapolis, In USA
Insane since: Jan 2002

IP logged posted posted 09-03-2003 14:52 Edit Quote

Eric Meyer just posted an article about containing floats on his new site. This may or may not help, but it's worth a shot.
It helped me solave a similar problem I was having.
http://www.complexspiral.com/publications/containing-floats/


Few problems in life can't be solved by chocolate

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 09-03-2003 18:11 Edit Quote

rickindy: Good point - I mentioned it here:
http://development.gurusnetwork.com/discussion/thread/2220/

but forgot about

Good catch

___________________
Emps

FAQs: Emperor

MajorFracas
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2003

IP logged posted posted 09-03-2003 19:35 Edit Quote

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 here 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).]

MajorFracas
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2003

IP logged posted posted 09-04-2003 16:58 Edit Quote

I got it to work in IE 6 and Netscape 7 by tweaking the size of the paragraphs to be twice the line height of the wrapping paragraph.

See here.

Moon Shadow
Paranoid (IV) Inmate

From: Rouen, France
Insane since: Jan 2003

IP logged posted posted 09-06-2003 14:29 Edit Quote

*Gives a cookie to MajorFracas*

Congrats for the solution ! It looks so easy now

By the way, in order to make the bottom div stick to the ones above under Opera 7 you just have to add "margin: 0px" to the style properties of the <p> tag.

[This message has been edited by Moon Shadow (edited 09-06-2003).]



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu