How do you make an "expandable" search bar to stretch when the browsers size is different?

Because the black box is going to expand as the menu in its left side keep going left while the search on its right side keep going right, you'll prolly have an element just holding all those together (Amazon used a table, bleh).

in header...
<img src="logo.png" width="whatever" height="whatever" alt="Windows 7 Phone ::the unofficial forum::" />
<div id="menuNformz">
  <ul>
  ...the menu...
  ..<li>
    <form>
    ...the form...
    </form>
    </li>
  </ul>
</div>

The form, if you set no width on it, is a regular block and will stretch as wide as it possible can, like static divs do. The input, however, will need you to actually say "width: 100%" on it.

It may look a little weird, but yeah, if search is considered part of the menu, then it can indeed be inside a list item element. LI's are blocks and can have block children. This eliminates the issue with getting two blocks to sit side by side without floating each of them. The li's can either be floated (with a width of auto) or set to display: inline-block (but you'll need a small hack for IE6 and 7 here if you use this one).

Instead of floating the black div or the logo image (which btw is in DIRE NEED of some alt text... So I would use an actual HTML image there for that reason), I'd just let the black div do whatever, have a min-width on it for your minimum screen width (otherwise at some point, the menu items will get bumped down underneath each other), and give it a left margin equal to however much space the logo takes up. This'll let the black div grow, except in that direction.

I'd be willing to relatively position the header and absolutely position the logo image (just the image, no div around it)... because it's encased in the header and the black div will always make room for it with the left margin, I think it would be safe enough. Then it can still be in the appropriate source order as well.

Since it's sitting on a dark background, you'll style your alt text to be prolly white and maybe even bold.

This is all outta my butt, so I might be missing something because I haven't built it. Amazon used tables... that top row is all one big table row and inside are various table cells, meaning they didn't have to worry about stuff like floats. I think it's good to avoid them here, mostly because floats drop and they shrink-wrap... we want the default block behaviour of stretching to fill its container (width-wise). As its width increases, this gives more room to the text input, who can also increase.

Also, this way your header can really be where it looks like it is, instead of being larger like it really is. The black bottom can be the bottom of the header... the image, if abso-po'd, can simply sit over it. A bottom margin on the header would keep middle section down far enough.

Awesome info
here's what I got so far: http://www.phone7forum.com/styles/celticdreams/template/liquids.html

I listened to what you said but took a slightly different route... The logo (which i still need to make an img) and left half of the navigation is absolute positioned.. the other right side of the "black div" is the expandable one with a left margin of like 600px or something like that. I decided to make the nav buttons absolute because sprites will be going there. (I'm not sure if their is a way to make sprites expandable or not but I'd rather not even think about that, lol). I haven't yet tackled the search bar.. that's next. I did finish the main content expandable box though. The header nav and main content box have min-widths set to them so they line up and stop perfectly when browser window is expanded. This template is definitely almost ready to be implemented over into the actual forum site. I would've already started the pr0cess but yet I have another issue that recently has been brought to my attention... It's a sizing problem:

>> Whenever I increase the font size and watch the website grow (by pressing ctrl+ on a windows machine).. the 4th size increase (on my computer anyways) makes the header and footer get cut off in the upper and lower right sides of the page. For the life of me I can't figure out why its doing that. I don't think its that big of a deal but I've gone this far in making this thing i feel like i should figure out why It shows in firebug that its the "html" tag that is cutting it off so I attempted to give the html a 100% value and nothing happend. I've been playing with it for a good 30 minutes now and still no results. Any ideas? I wonder...

I personally haven't found a good way to have expandable sprites. It's either the width of the image or it's not.

When I do sprites, I set the a's to position: relative and have spans inside who are position: absolute (and attached to their positioned parents, the anchors). This way, the spans have the image which covers the anchor text, meaning if the image doesn't load for whatever reason, you don't have the mystery-meat menus you get with negative text-indent. This is called Gilder-Levin image replacement, just with a sprite in your case.

Your menu background looks lighter than your form background. Is that meant?

If it's not and you used a PNG, it's my Firefox (and Safari will do this too) thinking you have a colour profile in your image.

You must be zooming?

Ah, yeah. Ok, actually usually setting widths will cause this issue, not solve it, but since I usually manage to avoid it, I'm thinking it's how you styled html and body.

In general I leave html alone, unless I need it to hold an extra image or something.

html, body {
  margin: 0;
  padding: 0;
}
 
body {
  /*set a text colour to compliment the background*/
  font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
  background: #d4d4d4;
}

Go ahead and make your font-size smaller on individual elements, OR leave it on the body in the form of 90% instead of 100%. But, Trebuchet is a smallish font already. Make sure those not quite as young and hip as the layout suggests don't need one or two text enlargements to read comfortably. Nobody ever complained "the text is too big to read!" : )

I have my browsers set to text-enlarge, instead of zoom, mostly because I don't care to see large pixelated images to go with my now-readable text. Except in Opera, who doesn't offer text-enlarge :/

http://stommepoes.nl/win7forums.jpg

That's as text-enlarged as I can go. The black div remains in place (and still stretchy if I make my browser wider).

Don't worry too much about how bad it looks there. My browser window is small and I enlarged as many times as I could. With width restrictions on the menu, esp with set widths on the anchors for sprites, this will always perform badly. That's the other thing I haven't found a nice solution to with sprites. They just have issues with text enlargement.

CSS3 could solve a lot of these issues (by replacing images with CSS), but then you'd have to be ok with IE6 and IE7 (and to some extent IE8 as well) looking rather plain but functional. Which you likely don't want on a fancy Web 2.0-ish looking site for, obviously, Windows fans. There's hope for IE9 though.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
Normally (without that tag), users who have compatibility mode on in their IE8 browsers will simply see your page the same way IE7 shows it, and you're already catering to IE7 users anyway. IE8 users with the default setting (act like IE8) will see things mostly the way anyone using a modern browser will. I'd call this tag redundant. As I understand it, users have to actively tell their copy of IE8 to act like a cripple (IE7), and so maybe they do it for a reason... but most users are lazy like me and just leave their browser at the defaults.
Unless you're targeting a crowd who like to play with their browsers? (possibly)