CSS Liquid Layout Problem

Question

I'm trying to do a simple masthead that will span the width
of the page. The masthead consists of a logo on the left, and a big
graphic on the right (it is a long story...). The left side of the
big graphic fades into the background, and the logo and .the
graphic move apart as the page is made wider.
Everything is fine as long as the browser window is wide
enough for both. As I shrink the window, however, the graphic drops
below the logo and the masthead is suddenly twice as high. What I
want to happen is for horizontal scroll bars to appear when the
extra space between the logo and the graphic has been squeezed out.
Here is the HTML:
<div id="masthead">
<div id="logo"><img src="images/logo.jpg"
/></div>
<div id="graphic"><img src="images/graphic.jpg"
/></div>
</div>
And the CSS:
#masthead {
background-image: url(images/masthead-bg.gif);
white-space: nowrap;
max-height: 89px;
#logo {
width: 148px;
height: 89px;
float: left;
#graphic {
width: 736px;
height: 89px;
float:right;
I'd be grateful for any suggestions.

Answer 1

Luke,
Put the background image on the body. By default, it will
tile to fill
the entire browser window.
HTH,
Randy
> I'm trying to make a simple page that has a background
image at the top of the
> page that expands to fix 100% of the page. just under
that I have an area set
> at 960px width and is centered on the page.
>
> The problem I have is that is you make the window
smaller than 960px you will
> see the scroll bars, scrolling left you can see the rest
of the fixed width div
> area but the 100% area at the top stops repeating and
does not fill the page.