I'm having trouble getting my layout to behave cross browser. You can see the layout @ kasper.ca/thv. It appears to work properly in IE6 (who woulda thunk), & Opera8, but Firefox 1.01 & 1.5 are not co-operating. I checked with Browsershots & Safari 2.0 is responding the same way that Firefox is.
What I want to see is the left sidebar appear directly underneath the title & the menu to be lined up beside the purple graphic. Currently in the misbehaving browsers the sidebar appears under the graphic & somewhat lined up with the content on the right. Can anyone suggest what I've done wrong? Thanks.

I looked at your code and the way you have it set up really does not make sense. Does take this the wrong way. but you would do better to split up your header image.
and then doe a lay out like

<div id="container">

<div id="header"><img/></div>
<div id="left">
<div class="buttons"></div> and other content
</div>
<div id="right">
<img/> and other content
</div>

</div>


You will have better control over things this way and will work on all browsers

#left would float left
#right would float right

Hope this helps, write back in you need more help

I guess I'm not getting it. I split up the graphic into 2 separate files - one for the title & the other for the purple graphic. Now everything's more messed up. The content box is waaaay down the page & the sidebar still doesn't show up where I want it. I've since reverted back to the way it was, but I've added a border to the sidebar. I don't understand how it is positioned so differently in Firefox.

because firefox is reading your code the right way, where as IE is not. Here is the code i just tested


<style>
#container{
width:770px;
}
#left{
width:180px;
float:left;
background:#0000ff;
}
#right{
width:590px;
float:right;
background:#ff0000;
}
.clear{
clear: both;
padding-bottom: 1px; /* for Gecko-based browsers */
margin-bottom: -1px; /* for Gecko-based browsers */
}
</style>

<div id="container">
<img name="temp" src="" width="750" height="123" alt="temp" style="background-color: #FFFF00" />
<div id="left"></div>
<div id="right"></div>
<div class="clear"></div>
</div>


the background colors are so u can see how it will look

I appreciate the help, but at this point I think I'm more interested in using a hack or something to line things up the way they should be (or rather the way I need them to be). See my examples here: kasper.ca/thv/examples.php.
Everytime I've played with the layout I get serious unexpected results - things were moving too far down the page & big gaps between things. ARGH
Working with what I already have (as much as possible), can anyone suggest how to hack/fix this?