On my weblog, I post small pictures in the body of posts from time to time. I’d like to have the text in the post wrap around those pictures in a nice and spiffy way, but when I use the “float” property in the img tag, the text of further posts wraps around the image as well. What I’d like to be able to do is tell the float property to stop wrapping text after a certain point, but I’m not sure how to do that.
See the brokenness here
In addition, if you scroll a bit further down that page to the post titled “BBQ Pictures”, I have the problem that I can’t seem to get the images to align at the top of the screen and have the text wrap between them. I have one set as “float:right” and the other “float:left”, but whichever one is first in the html ends up being one text-line higher than the other, and the text doesn’t wrap the way I want it to.
Is there a way to make my images behave?
Follow the text with <br clear=all> and it should slide it down as far as necessary to clear the picture. Is that what you’re looking for?
I should have previewed. I thought tag symbols got processed. Make that <br clear=all>
Sweet. Thanks Wombat.
Any idea about getting the two images to vertically align when floated to opposite sides? Do I have to make three columnar divs for that?
If you just include an “align=right” in one and an “align=left” in the other, and put the two img tags right up against each other with no space in between, it usually works fairly well (is that waffly enough for you?).
I’ve also tried making a style that floats right and a style that floats left, but I’ve had inconsistent results. Building three columns (using either styles and divs or a table) is fine, but you end up with all of the text running in a little tiny space down the middle of the page. I almost always end up pushing all of the pictures to the same side of the text to avoid that.
When I’m working late at night and my eyes get bleary, I often enlarge the text size in my browser. There’s nothing more annoying than having a window 1,200 pixels wide and a column of text 200 pixels wide, containing a few words per line, with a huge empty space filling the rest of the browser. I don’t know why so many Web designers force their pages into narrow fixed widths rather than letting them expand naturally to fill the window.
I’d like not to use align because it’s deprecated. Thanks for the suggestions.