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

Floating elements and text-indent

P: n/a
I noticed an irritating behaviour of the text-indent property and I
wonder if I'm the only one to feel this way about it: it seems that
text-indent applies even to floated elements. Although this is probably
correct according to the specification (text-indent is inherited), don't
you think it makes no sense to apply text-indent to such elements ?

Here is an example: I have a paragraph, starting with a clickable image,
that's followed by text, so basically:

<p><a href=""><img src="" width="110" height="110"></a>aaa bbb ccc</p>

I want the image to be floated, and the text of the paragraph should
flow around it with the firt line being indented. I have the following CSS:

a { float: left ; border: 1px solid green ; }
img { vertical-align: bottom ; }
p { text-indent: 1em ; }

The green border around the A element shows that there is some space
between the left edge of the A and the left edge of the image and this
space comes from the text-indent set on the P...which is not indented.

I would have expected that, A being floated and out of the normal flow,
the text-indent wouldn't apply to it but rather to the rest of the text.
Am I asking for something stupid ?

By the way, the problem is half as bad when removing the A element and
directly floating the IMG: neither the IMG, nor the P are indented...

--
to email me, add "poinot" before the at-sign in my
address and wanadoo after it...

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


P: n/a
<p><a href=""><img src="" width="110" height="110"></a>aaa bbb ccc</p>

I want the image to be floated, and the text of the paragraph should
flow around it with the firt line being indented. I have the following CSS:
a { float: left ; border: 1px solid green ; }
img { vertical-align: bottom ; }
p { text-indent: 1em ; }


After a little playing, I got this:
body {width : 300px;}
div.image_indent img {float : left; margin : 10px;}
div.image_indent p {text-indent : 1em; text-align : justify; margin : 0;}
<div class="image_indent">
<a href=""><img src="" width="110" height="110"></a>
<p>this is a whole bunch of random text. this is a whole bunch of random
text. (etc etc etc)</p>
</div>

Which does just what you require. (The body width is just to demonstrate
that it works)

HTH.

P.
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.