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.
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 ]
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).]
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.
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).]
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
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.
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: 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........ ).
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).]
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).]
posted 08-31-2003 04:21
]
