By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,395 Members | 1,882 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,395 IT Pros & Developers. It's quick & easy.

Trouble with float

P: n/a
On the page:

http://firasd.org/temp/faq.html

How would I make the picture contain itself in the first grey <div>?
Basically, nudge it up and make the "This FAQ is compiled voluntarily
...." text wrap to its left?

In case someone wants to see the structure visually:
http://firasd.org/temp/outlined.gif

Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
On Fri, 23 Jan 2004 17:29:43 -0500, Firas D. <fd********@firasd.org> wrote:
On the page:

http://firasd.org/temp/faq.html

How would I make the picture contain itself in the first grey <div>?
Basically, nudge it up and make the "This FAQ is compiled voluntarily
..." text wrap to its left?

In case someone wants to see the structure visually:
http://firasd.org/temp/outlined.gif


Simplest way - put the img before the text.

<div class="note">
<div style="float: right"><img src="maestropic.png" alt=""></div>
<p>This FAQ is compiled ...
Jul 20 '05 #2

P: n/a
Firas D. wrote:
On the page:

http://firasd.org/temp/faq.html

How would I make the picture contain itself in the first grey <div>?
Basically, nudge it up
float the image before the text; the image div moves right...
and make the "This FAQ is compiled voluntarily ..." text wrap to its
left?


....& the following text flows into the gap.

However this won't make the div contain the image if the image remains
taller than the flowed text. See
http://www.complexspiral.com/publica...aining-floats/

To overcome this problem, you need an object following the text which is
forced to clear the preceeding floated image & will remain in the div
boundary (or you can make the parent div itself floated, as floats do
expand to contain floats).

I thought the following should work, but it doesn't. Leastways, it seems
to in Mozilla, but in IE6 the paragraph texts vanish. Probably me being
stupid. Hopefully you'll get a more helpful answer shortly.

<div class="note">
<div style="float: right"><img src="maestropic.png" alt=""></div>
<p>[snip text]</p>
<p>[snip text]</p>
<hr style="display: block; clear: right; visibility: hidden; margin:
-0.2em 0;" />
</div>

--
Michael
m r o z a t u k g a t e w a y d o t n e t
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.