div "float" vs. img "align"

@JuparisJul 12.2005

When using the “align” attribute of img’s, it will shift to that part of the screen, and the text moves freely about as if there was just a fence around the image..
I tried converting to DIVs to keep validation, but I saw that when using “float,” text will stop where the <div> tag was inserted and then continue on the next line..

I was wondering if there’s a way to keep the text moving, regardless of where a div is inserted? I have a large page of text with images randomly place in the text–if it’s to be viewed on different resolutions, etc., I wanted to keep the text flowing instead of stopping mid-sentence to jump to the next line…

~~[url=http://www.juparis.x3fusion.com/other/hslt.htm]~~Here’s an example page[/url] of the problem.. (It’s just random text for now).

I was also wondering how to keep two divs centered, but kept next to eachother as well; using ~~[i]~~display:inline[/i] resized the border, and using float’s shift them onto seperate lines… Help!

to post a comment

CSS

@drhowarddrfineJul 12.2005 — #You have quite a number of errors, such as missing end divs and mis-types in your css code, such as img.rp positioning.

@WoDJul 12.2005 — #[i]"I was also wondering how to keep two divs centered, but kept next to eachother as well; using display:inline resized the border, and using float's shift them onto seperate lines... Help!"[/i]

Put them inside another div, center that div, and float them both left.

You do not need to wrap images in DIV tags to align them left or right, simply add a class to the image itself and float IT left or right.

You might also be interested in www.lipsum.com for your random test text.

@JuparisauthorJul 13.2005 — #You have quite a number of errors, such as missing end divs and mis-types in your css code, such as img.rp positioning.[/QUOTE]

I must have rushed too much when making the page--I fixed the positioning, but saw no missing div tags...

Put them inside another div, center that div, and float them both left.

You do not need to wrap images in DIV tags to align them left or right, simply add a class to the image itself and float IT left or right.
[/QUOTE]
The first part has me confused now... I added a div tag, saved, went back and removed that div tag without touching anything else. Suddenly, they're adjacent the way I want, but the div they're in won't center anymore..

And I prefer to keep the images in divs--I like the border effect now, and would much rather keep the divs than to just re-create each image with a fake border around it.

You might also be interested in www.lipsum.com for your random test text.[/QUOTE]
I never knew random text had it's own site, let alone a popular purpose.. Thanks for the link--you saved me a lot of typing. ?

If you look at the test page again (which is virtually the same as it was before), you'll notice that the third image down is exactly how I want it--in ever resolution, in every window size, the text moves about freely without breaking.. I don't understand what sets it apart though.. Can anyone else find it?

div "float" vs. img "align"

3 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

div "float" vs. img "align"

3 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #CSS _↴