When you say "wrap" do you mean insert a line break before, insert a line break in the middle, or something else entirely?

You don't show the css for class = "abta" which would seem to be crucial. By default, both <div> and <h\d> display as blocks-- that is, starting on a new line.

Are you in html 4 or 5? The behavior of floats is different in ways that some browsers may not have caught up to.

The rough-and-dirty way to prevent a small element from breaking in the middle is to include {white-space: nowrap} --but don't quote me on the hyphens, because I always get it wrong when there's no Syntax Highlighting to help.

I'm not sure, but the CSS you've posted (apart from the h1) doesn't appear to match the HTML? What styles are applied to "ad" and "abta"? I would have thought that all browsers should wrap the text inside the H1 if it doesn't fit. The H1 should fill the available width in all browsers - unless there is something else restricting it?

As lucy24 says :)

This seems to affect crome and FF

The header is set up so that the ad div, floats right with the abta div (it's a sprite image) floating left but i cant get the adta div to move left to stop the hi breaking when the h1 text gets larger.

However rather oddly if you have more text under the h1 this does move everything left so the H1 will fit...

<div id="ad">
<div class='abta'>this is a sprite image</div><h1>Mediterranean <breaks here> holidays.</h1> Blah blah.<br> We are here to help you get the.<br> -<b>"Right</b> more blah blah!"
</div>
<div style="clear:both">

</div>
</div>

Does the floated "abta" DIV have a width applied?

Does the <h1> text look as if it should all fit on 1 line? Apply a temporary border to your <h1> to check.

Hi Penders

The h1 all looks fine in IE everything moves left to take more text but FF refues to budge...

The floated abta div is a sprite, how can i set a width?

.abta { background-position: -290px -0px; width: 32px; height: 42px; float:left; padding:0 0 0 4px;
}

If i do this <h1><div class='abta'></div> Some text</h1> it does work in FF but this is not realy a correct sollution.

Set white-space:nowrap on your h1.

The floated abta div is a sprite, how can i set a width?
.abta { background-position: -290px -0px; width: 32px; height: 42px; float:left; padding:0 0 0 4px; }

It looks like you already are, on the .abta class at least.

However, I think you need to set a width on your floated #ad container to give the H1 enough room. Yes, there does appear to be a difference between IE and Firefox/Chrome in this respect. IE is expanding the floated container to fully accommodate its contents (the floated .abta and H1 elements), but Firefox/Chrome are ignoring the width of the floated .abta element (it is after all taken out of the flow of the page) and the width of #ad is determined solely by the H1 which flows behind the .abta element, but the text is pushed right and therefore does not fit in #ad.

Setting

white-space:nowrap

as lucy24 and rocknbil suggest does indeed prevent the text from wrapping, but (for reasons I cannot fathom) this does not expand the width of the #ad container. The H1 text simply overflows the H1 and the container. However, adding enough text after the H1 does expand the #ad container and the H1 text fits! The additional text wraps AND expands the container - not particularly predictable as far as I can see?!

Setting a width on your floated #ad container seems to resolve these issues and makes it consistent cross browser.

Thanks Penders rocknbil lucy24

Much appreciated, in the end i set a width on the ad div not perfect as i had to set a generic size. Damn that FF lol

Some of y'all may remember that for a while the w3c CSS validator insisted on an explicitly declared width for floats. (They now seem to have given up the idea.) Didn't do much good of course if the value you chose to set was "auto", meaning "do exactly what you would have done if I hadn't said anything".* Maybe they were hoping nobody would think of that. The validator is just a dumb machine, so it can't tell that you're cleverly sidestepping its rules.


* Where would CSS be without "auto" and "inherit"? ;)

Hi Lucy24

width:auto does not work with FF grrr, does work rather nicely with IE..