Div tag takes the width of the longest word in contents

div width longest

[Attila001122]

Hello,

I am new to CSS, so please be patient.

Not a great problem, but annoying:
I am using Dreamweaver CS3 and CSS to build my site.
There is a div tag to contain simple text. Everything is default, only margin and padding setting are not 0
I use it in 2 occasion.
On the first, it is normal.
On the same page next time it behaves as it was made of elastic.
It adjusts its width to the longest word in it.

In Firefox and in IE6 the result looks completley normal, only Dreamweaver displays it like this.

Anyone knows about these problem?

Thanks

Attila

[ChrisBolton]

I'm not really sure what your problem is, but if you are suggesting that your page displays wrong just in Dreamweaver then this is normal. Dreamweaver in design view cannot display your CSS settings like a browser does.

[Attila001122]

Thanks...

Yes, I guess the HTML editors are not really accurate...

But the problem is that why behaves the same div tag differently in two cases...

I guess even that would be helpful if I could now the name of that behavior, ie adjusting the size to the longes word.

As I expect, if there is no other settings, the horizontal size of the div tag is the longest paragraph or the size of the container if it it in there.

I my case the second div tag writes almost every word in a new line. So it looks like every space acts as a line break <br />.

Any input is welcome,

Thanks

Attila

[ChrisBolton]

To be honest, I'm quite surprised that you are not giving the <div> a width in some form. Either in px, % or em. I can't think of any cases where I wouldn't specify some width with regards to the container or another <div> on the same page. This is one way of ensuring it will display the same on every page. Just make sure that any <div>s or images inside this <div> are not larger in width or your layout may break.

[ChrisBolton]

Please remember, a <div> is just a container for content. It is simply a box which will contain anything you put inside. If you would like it to be a certain size you must specify it in the CSS. Again, the reason your two divs look different is just due to the display model Dreamweaver uses.

[Attila001122]

" To be honest, I'm quite surprised that you are not giving the <div> a width in some form. "

Yes, maybe I took granted that sometimes the div taking automatically the space what horizontally available...

So why there is no with?

On the left there is an image, and my "good" div is just right to it, with some text.
So there is a picture with an explanation...
(If I give to it 100% width, it "jumps" under the picture and fills the space...)

Under that there is the "bad" div with some other text which is spreading downwards instead of to the right.
That one has no picture front of it...

Thanks for your inputs, but I have to go now, and only see your answer tomorrow.

Attila

[Attila001122]

"If you would like it to be a certain size you must specify it in the CSS. "

Yes, often I do this.

But in this case, I am trying to use the same div to display a text next to an image, from there to the right margin,
and a little below an other text from the left margin to the right...

Thanks...