471,078 Members | 801 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,078 software developers and data experts.

Floating elements and text-indent

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
1 5565
<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.

Similar topics

8 posts views Thread by Harald Massa | last post: by
16 posts views Thread by Michael Bernstein | last post: by
2 posts views Thread by Chris Gurk | last post: by
3 posts views Thread by Oliver Bryant | last post: by
1 post views Thread by Lee K. Seitz | last post: by
4 posts views Thread by Ivor Somerset | last post: by
6 posts views Thread by Jeremy | last post: by
5 posts views Thread by Adam Smith | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.