CSS Question

[jdcfsu]

I'm working on a redesign for our Children's Ministry department and I've run into a slight problem. The bottom of the lighthouse logo is being overrun with text. I know that I can fix this by adjusting the width of the p field containing the page's text, but I don't want to bring all of the text on the page in the 30 or so pixels it would need. Is it possible to create some sort of invisible CSS box that can float directly over the bottom of my lighthouse creating a type of text wrap, so that the text in that area is wrapped but nothing else is? I've included a picture of the site I've got going and can post the CSS and HTML code if need be. Thanks guys.
http://img161.imageshack.us/img161/7344/picture1tg2.th.png (http://img161.imageshack.us/my.php?image=picture1tg2.png)

[adamb]

You could use a class for the paragraph that is overlapping the image, and set the width so that the overlap isn't occuring in your CSS. It would mean that only that 1 paragraph would be narrow. That's probably the easiest solution.

[Moogs]

Yep. You could create a class that is exactly the same as the rest of your text styling, plus padding-right: 30px; (or whatever the value would be)...

...then apply that to the bottom paragraph. It won't wrap to the contour of the graphic, but it will stay out of the way.

[jdcfsu]

Yeah, but the problem is that text will change with different posts and it'll be impossible to go in and change the p class each time a new post is added. I was wondering if there was some sort of way to just create a div of say 50x50 and have it be positioned at that exact spot and have the text wrap around it.

[drewprops]

Interesting.

If you float a DIV then it's not going to affect the text unless that text is also inside a floated element. So that's two different things to float. I guess you could use relative positioning..... not sure.

The lazy solution would probably also be ugly: dump all the text into one DIV and you push that DIV in from the right border.... it's really going to isolate the lighthouse graphic and it's going to leave a lot of white space.

[jdcfsu]

The lazy solution would probably also be ugly: dump all the text into one DIV and you push that DIV in from the right border.... it's really going to isolate the lighthouse graphic and it's going to leave a lot of white space.

Yeah, I know that would be my easiest way out, but it would produce the worst results. I'll try floating the entire container div to see if I can get it to interact with a smaller floating div over the bottom of the lighthouse like you mentioned.

[Kraetos]

Interesting.

If you float a DIV then it's not going to affect the text unless that text is also inside a floated element. So that's two different things to float. I guess you could use relative positioning..... not sure.

The lazy solution would probably also be ugly: dump all the text into one DIV and you push that DIV in from the right border.... it's really going to isolate the lighthouse graphic and it's going to leave a lot of white space.

White space isn't necessarily a bad thing. If this were my project, I would do exactly that: give the lighthouse graphic a box that it fits inside, and have the text stop dead at the widest point. I'd try that, and see how it looks/how you like it.

It would also narrow the text area, which increases readability. Think about any magazine: most divide the text into three 2.5 inch columns, rather than consume 7.5 inches across, for one reason: its more readable.

That said, the answer to your first question is this: is that image a transparent PNG or a JPEG with whitespace? If the answer is the latter, which I suspect it is, convert it and place it inside the same div as the text. That might work, but I'm not sure.

More on whitespace: A List Apart: Whitespace. (http://www.alistapart.com/articles/whitespace) Worth reading regardless of your solution.

[Moogs]

This might work for you...

http://meyerweb.com/eric/css/edge/slantastic/demo.html

or possibly

http://meyerweb.com/eric/css/edge/boxpunch/demo.html

[jdcfsu]

This might work for you...

http://meyerweb.com/eric/css/edge/slantastic/demo.html

or possibly

http://meyerweb.com/eric/css/edge/boxpunch/demo.html

Hey, very cool! I'll have to check these techniques out and see how they work for the project.

[jdcfsu]

Thanks Moogs. The technique worked. Now that I know what I can do with it, I'll play with whitespace a bit and see what I like. But for now, here is an updated screenshot:
http://img48.imageshack.us/img48/4462/picture1tn9.th.png (http://img48.imageshack.us/my.php?image=picture1tn9.png)

[billybobsky]

Aesthetically, I would force that paragraph to be one width.

[Moogs]

Thanks Moogs. The technique worked. Now that I know what I can do with it, I'll play with whitespace a bit and see what I like.

No problem... glad it worked for you. Did you try the slant? That might look even better, if you can swing it.

[jdcfsu]

Na, I just went with a straight box. I'm not sure I'm 100% happy with it though, I might play with the slant to match the angle of the lighthouse the next time I play with it.