img overflowed by text

[Rafal 'Raf256' Maj]

Hi,
I want to have an image, overflowed by text (using XHTML,CSS) problem is
that when I use align="left", then the image was breaking out of <div> in
with it was (div is a border). AsciiArt example of what I want to achive :


1) I have a text in <div style="border: 1px">

---div------div------div----
| text text text text text |
| text text text text text |
| text text text text text |
| text text text text text |
| text text text text text |
---div------div------div----


2) Then I add an image to begin of it :

---div------div------div----
| ***** |
| *img* |
| ***** text text text text |
| text text text text text |
| text text text text text |
---div------div------div----


3) Then I add align="left" so that text will be all over image:

---div------div------div----
| ***** text text text text |
| *img* text text text text |
| ***** text text text text |
| text text text text text |
| text text text text text |
---div------div------div----

4) Problem is, that, when image is too long (height) then it's breaking out
of <div>, instead of making <div> longer (higher) - at leaste under Mozilla
1.5 the result looks like :

---div------div------div----
| ***** text text text text |
| * * text text text text |
| * * text text text text |
| * * text text text text |
| * * text text text text |
--* *-----div------div----
* *
*****

5) when what I want to have is :

---div------div------div----
| ***** text text text text |
| * * text text text text |
| * * text text text text |
| * * text text text text |
| * * text text text text |
| * * |
| * * |
| * * |
--*****-----div------div----

 

[William Tasso]

I want to have an image, overflowed by text (using XHTML,CSS)
...

Have you considered CSS background-image:

 

[Rafal 'Raf256' Maj]

(e-mail address removed)

Have you considered CSS background-image:

Make an <div> with defined width and height and background image? It has
few disadvantages (no alt, no title, no easy download, no image google
indexing)... but maybe its a good workaround for now... how can I make an
text floating around <div> ?

222222222222222222222222222
211111 text text text text2
21 1 text text text text2
21img1 text text text text2
21 1 text text text text2
211111 text text text text2
222222222222222222222222222

1 - div #1
2 - div #2

 

[Rafal 'Raf256' Maj]

(e-mail address removed)

how can
I make an text floating around <div> ?

better example of what I ment:

2222222222222222222222222222
211111 text text text text 2
21 1 text text text text 2
21img1 text text text text 2
21 1 text text text text 2
211111 text text text text 2
2 text text text text text 2
2 text text text text text 2
2 text text text text text 2
2 text text text text text 2
2222222222222222222222222222

 

[Eric Bohlman]

Hi,
I want to have an image, overflowed by text (using XHTML,CSS) problem
is that when I use align="left", then the image was breaking out of
<div> in with it was (div is a border). AsciiArt example of what I
want to achive :


1) I have a text in <div style="border: 1px">

---div------div------div----
| text text text text text |
| text text text text text |
| text text text text text |
| text text text text text |
| text text text text text |
---div------div------div----


2) Then I add an image to begin of it :

---div------div------div----
| ***** |
| *img* |
| ***** text text text text |
| text text text text text |
| text text text text text |
---div------div------div----


3) Then I add align="left" so that text will be all over image:

---div------div------div----
| ***** text text text text |
| *img* text text text text |
| ***** text text text text |
| text text text text text |
| text text text text text |
---div------div------div----

You actually want to give the image a "float:left" property in your CSS,
rather than using the deprecated "align" attribute in your HTML.

4) Problem is, that, when image is too long (height) then it's
breaking out of <div>, instead of making <div> longer (higher) - at
leaste under Mozilla 1.5 the result looks like :

---div------div------div----
| ***** text text text text |
| * * text text text text |
| * * text text text text |
| * * text text text text |
| * * text text text text |
--* *-----div------div----
* *
*****

Yes, by default a floated element can break out of its container. This is
actually desirable in most cases, just not in yours (think of an image
inset into the first of several paragraphs. If it couldn't break out of
the first paragraph, the subsequent paragraphs couldn't flow around it.

5) when what I want to have is :

---div------div------div----
| ***** text text text text |
| * * text text text text |
| * * text text text text |
| * * text text text text |
| * * text text text text |
| * * |
| * * |
| * * |
--*****-----div------div----

You accomplish this by making the last element of your <div> be a block
element (typically a <div> that contains nothing but a non-breaking-space)
which has the "clear:left" CSS property set. That forces the <div> to be
tall enough to contain the image.

 

[Sid Ismail]

: 4) Problem is, that, when image is too long (height) then it's breaking out
: of <div>, instead of making <div> longer (higher) - at leaste under Mozilla
: 1.5 the result looks like :
:
: ---div------div------div----
: | ***** text text text text |
: | * * text text text text |
: | * * text text text text |
: | * * text text text text |
: | * * text text text text |
: --* *-----div------div----
: * *
: *****
:
: 5) when what I want to have is :
:
: ---div------div------div----
: | ***** text text text text |
: | * * text text text text |
: | * * text text text text |
: | * * text text text text |
: | * * text text text text |
: | * * |
: | * * |
: | * * |
: --*****-----div------div----
:


At the end of your text, state
<br clear="all">

Sid

 

[rf]

On 19 Nov 2003 02:43:26 GMT, "Rafal 'Raf256' Maj" <[email protected]> wrote:

At the end of your text, state
<br clear="all">

Deprecated Sid Did you mean <br style="clear: both;"> ?

Cheers
Richard.

 

[Sid Ismail]

: :
: > At the end of your text, state
: > <br clear="all">
:
: Deprecated Sid Did you mean <br style="clear: both;"> ?


Align=left is also deprecated. He either uses that BR in a deprecated
environment (as a quick fix) or changes to float:left in CSS, then to use
the CSS equivalent.

Sid

 

[rf]

: :
: > At the end of your text, state
: > <br clear="all">
:
: Deprecated Sid Did you mean <br style="clear: both;"> ?


Align=left is also deprecated. He either uses that BR in a deprecated
environment (as a quick fix) or changes to float:left in CSS, then to use
the CSS equivalent.

Sorry Sid. Didn't spot that in the OP (seems to be using some sort of
encoding that makes the text miniscule in my newsreader). You are correct,
as I always expect

Cheers
Richard.

 

[Bertilo Wennergren]

Make an <div> with defined width and height and background image? It has
few disadvantages (no alt, no title, no easy download, no image google
indexing)... but maybe its a good workaround for now... how can I make an
text floating around <div> ?

The main disadvantage is much worse: The "div" contains text, so you can
never know what "width" and "height" is necessary for the text.

222222222222222222222222222
211111 text text text text2
21 1 text text text text2
21img1 text text text text2
21 1 text text text text2
211111 text text text text2
222222222222222222222222222

Some people will see that with another font, or with another font size
(perhaps much larger), or both. And the text might spill out of the "div".

 

[Bertilo Wennergren]

Deprecated Sid Did you mean <br style="clear: both;"> ?

The best way (if you subscribe to keeping content and presentation
separate) is to set a "min-height" for the "div". Unfortunately
"min-height" will only work in modern browsers (not in e.g. MSIE).

That might still be the way to go, if it can be accepted that the images
does spill out of the container in old browsers. However, if that would
completely ruin the page display, then regrettably a "br" (or "div")
with "clear: both" is the only option.