FOAK: HTML/CSS

I'm trying to display a floating box with a news-ticker and an image side-
by-side above some text. It was fine when I used a layout table but
that's now deprecated. My problem is that it insists (firefox 3 in the
first instance) on putting the image UNDER the news-ticker. I can move
the image with position:relative; left:155; top:-100; in a style
statement but, of course, the browser still leaves room for it as if the
image were still below the ticker, and I want the text immediately below.
My Google mojo seems to have deserted me and I'm tearing my hair out. I'm
obviously missing something obvious - can anyone see what it is, please?

This is what is presently not working:

<div class="floater">
<iframe title="news-ticker"
width="155" height="100" src=
"ticker/latestnewsnewstic.html" scrolling="no"
frameborder="0" style="display:inline;"></iframe>

<img style="display:inline;"alt=
"The choir at Norwich Cathedral" src=
"images/tickerphoto.jpg" style=
width="155" height="100">
<p class="boxed">Let all the world in evr'y corner
sing, my God and King!<br>
-George Herbert (1593-1633)</p>
</div>


and in the (external) style-sheet:

div.floater{
padding:0pt;
border:thick solid white;
height:300px;
width:310px;
left:20px;
position:relative;
top:-300px;
z-index:5;
}

 

Can't you just stick each element in a div of its own and position those
(inside the .floater div)?

 

On Sat, 17 Oct 2009 22:47:33 +0100, Andrew998 wrote:

Now, why didn't I think of that? Too close to it, I guess! My mind-set
was to replace a layout table with a div. Nested tables are so verboten
these days that nested divs never occurred to me Thank you, I'll try
it.

 

You could try adding

float: left;

 

<bad form>

And it worked a treat, thank you. Interestingly [1], the text bit had to
be put into a div with top:-100px because, in spite of the first two
nested divs, the space was still being left for the <img>

thanks again
Derek

1. For some values of 'interesting'.

 

took a blunt brush and painted...

What did he say?

 

something about non-compliance with W3C standards.

And I bet you he's not tested it in IE...

 

You lose. IE 3 4 5 5.5 6 7 & 8 all tested.

 

took a blunt brush and painted...

Does it work in Lynx?

 

Of course. And with WebbIE using the Thunder screen-reader. However Opera
<7 chokes on the javascripts for some reason. Opera 7+ is fine.