469,275 Members | 1,841 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,275 developers. It's quick & easy.

Line breaks within <div>

Hello all,

Having googled around without any luck, I resort to posting my own
question: Is there any way I can make a <div> adjust to the width of a
contained image and line break any long text instead of expanding the
<div>?

The background of the problem is that I use a nested <div> to contain
an image and its caption. I float the entire <div> to the right in its
containing <div>.

<div #id="img">

<img src="image.jpg" border="0" alt="Some image" />

<p>A long caption that extends the horizontal width of the
image</p>

</div>

I use the following CSS:

#pagebody #img {
float: right;
margin: 15px;
}

#pagebody #img p{
font-family: tahoma, arial, helvetica, sans-serif;
font-size: x-small;
}

What can I do to make the text behave according to plan? Thanks for
you help!

/Lars
Jul 20 '05 #1
2 40457
Lars wrote:
question: Is there any way I can make a <div> adjust to the width of a
contained image and line break any long text instead of expanding the
<div>?

The background of the problem is that I use a nested <div> to contain
an image and its caption. I float the entire <div> to the right in its
containing <div>.


<div #id="img">
<img src="image.jpg" width="90" height="90" alt="Some image">
<p>A long caption that extends the horizontal width of the image</p>
</div>

#id {
width: 90px; /* use the width of the image + padding + border */
}

#id img {
border: none; /* replace the border attribute in html */
}

--
Brian
follow the directions in my address to email me

Jul 20 '05 #2
In article Lars wrote:
Hello all,

Having googled around without any luck, I resort to posting my own
question: Is there any way I can make a <div> adjust to the width of a
contained image and line break any long text instead of expanding the
<div>?
Set div to have same width as image is only well supported way I know.

You can do that by saying display:table;width:1px but it may give you
additional problems, and don't always work. There is also other ways, but
I don't think any of them works with IE.
The background of the problem is that I use a nested <div> to contain
an image and its caption. I float the entire <div> to the right in its
containing <div>.
[snip code]
What can I do to make the text behave according to plan? Thanks for
you help!


You know the width of image, set that as width for div. If you have lots
of differently sized images, use server side thing.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

55 posts views Thread by Ton den Hartog | last post: by
2 posts views Thread by Nikolai Onken | last post: by
28 posts views Thread by Kent Feiler | last post: by
2 posts views Thread by Richard Maher | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.