layout problem

[key_uk]

hello, I have the same problem I did before of another site, which I didnt sort out. basically this is my site: http://www.cse.dmu.ac.uk/~p04288752/csci1404/Website/ as you can see the stroll box is at the bottom of the page, I want it on top of the gray box above it. But the only way I can seem to do it is by putting top:-500px, which leaves space at the bottom of the page where the stroll was. How can I get round this? here is teh bit of code for the stroll box:

<div class="news container" style="height: 440px; width: 510px; overflow: auto; margin:0 auto; left:40px; position:relative; z-index:2;">
<p> contents goes here </p>
</div>

can anyone please help me?

[crazyluv]

You can place the div "news container" inside the div header2 and I think it would do it. I see that you are using div's to layout your site. I believe you should place the images as BG since this will help a lot when you start to place the content. Unless you want to position:absolute everything. Also the page looks ok in IE but breaks in FF.

[key_uk]

I have added it to header2 and it works fine in IE, but like you said it breaks up in ff. do you think it I placed the images as BG it would work in ff, and how I would go about this. Thanks for your help im very grateful

[crazyluv]

Well making the BG will help content wise more then fixing it with FF but all that is needed are a few tweaks in the layout. I mean changing the positioning or width and heights of some of the elements. That is one thing that is unavaoidable since both browser tends to measure things slightly diferently. With a few tweaks I think everything will be ok.
As for BG I believe it is best because that way you can place content over them without have to add any more div's to the page you just place the content inside the div with the image as a BG.