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

Line breaks within <div>

P: n/a
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
Share this Question
Share on Google+
2 Replies


P: n/a
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

P: n/a
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.