CSS Liquid header problems

[CJD118118]

Hi, for ages now i've been trying to create a header that i am satisfied with and have been having some major problems.

I'll start off by explaining what i want. I'd like a 5 column header, the outer 2 columns expanding/contracting based on the browser width. The inner 2 columns need to be a fixed width of around 8%. The central column needs to contain an image 480px wide and display the entire image no matter what the browser size is.

After trying hundreds of different things this is the best i have so far at http://www.cjd.galekus.com/header/headertest.php.

The stylesheet can be found at http://www.cjd.galekus.com/header/styles.css.

The problem is this doesn't display quite how id like in either FF or IE.

In FF it looks like this:
http://i18.photobucket.com/albums/b127/cjd118118/ffexample.jpg?t=1182865967
And in IE like this:
http://i18.photobucket.com/albums/b127/cjd118118/ieexample.jpg?t=1182865979

If you've read through all that i'd really appreciate some help in fixing this v. annoying problem. Thanks.

[docpepper]

I think you are trying to over complicate things.

Is there and reason to have the right and left header? If they are just going to be void spaces I would scrap them and have your header 3 divs. Then just text-align right/left for each navigation div.

But this doesn't solve your issue...

Also I see you have a #header_container{ in your style but there is no div of that name in your html. As this is styling your header to be 100% width this may be your issue.

I dont really have time at the moment to test anything but ill try to have another look tonight!

[CJD118118]

Right, well i've switched to a 3 column layout now (thanks for suggesting that, makes much more sense). But im still at a loss as to how to get a nice fluid layout.

Just to reinterate im looking for one fixed central column and two fluid outer columns.

Thanks again docpepper :)

[ray326]

Make the banner a single div with the logo as a background image. Put the navs into the banner floated left and right. Use clear:both on the content. Oh, and menus are lists of links.

[CJD118118]

Make the banner a single div with the logo as a background image. Put the navs into the banner floated left and right. Use clear:both on the content. Oh, and menus are lists of links.

Do you think you could elaborate a bit? I don't really understand what you're saying. Thanks...

[ray326]

What's not clear? Here's a skeleton.

<div id="banner">
<div id="leftnav">
<ul><li><a href="#">link</a></li></ul>
</div>
<div id="rightnav">
<ul><li><a href="#">link</a></li></ul>
</div>
</div>
<div id="content">
<p>lorem ipsum</p>
</div>
<div id="footer">foot stuff</div>

[CJD118118]

Sorry i'm hopeless at CSS.This is what i've got now.

http://www.cjd.galekus.com/header2/headertest.php

[ray326]

Take the img out of your #header and put it in the background.

#header {styles.css (line 20)
background:black url(mainlogo.jpg) no-repeat scroll center;
border:0pt none;
height:100px;
margin:0pt;
padding:0pt;
}

Then make your left/right navs unordered lists.

[CJD118118]

Thanks for all your help. With some modification i've finally got something i'm happy with and it displays correctly in both IE and FF!