header not forming right

[singersower]

<Sorry, no example URLs. See TOS [webmasterworld.com]>

The .css for the header is:
#Table_01 {
position:absolute;
left:0px;
top:0px;
width:1001%;
height:233px;
}

#bfheader107747p-01_ {
position:absolute;
left:0px;
top:0px;
width:994px;
height:104px;
}

#bfheader107747p-02_ {
position:absolute;
left:0px;
top:104px;
width:1001px;
height:76px;
}

#bfheader107747p-03_ {
position:absolute;
left:0px;
top:180px;
width:994;
height:52px;
}

The HTML is:
<div class="Table_01">
<img id="bfheader107747p_01" src="images/bfheader107747p_01.gif" width="994" height="104" alt="" /></div><div class="bfheader107747p-02_"><img id="bfheader107747p_02" src="images/bfheader107747p_02.gif" width="994" height="76" alt="" /></div>
<div class="bfheader107747p-03_ ">
<img id="bfheader107747p_03" src="images/bfheader107747p_03.gif" width="158" height="52" alt="" /><img id="bfheader107747p_04" src="images/bfheader107747p_04.gif" width="152" height="52" alt="" /><img id="bfheader107747p_05" src="images/bfheader107747p_05.gif" width="120" height="52" alt="" /><img id="bfheader107747p_06" src="images/bfheader107747p_06.gif" width="122" height="52" alt="" /><img id="bfheader107747p_07" src="images/bfheader107747p_07.gif" width="112" height="52" alt="" /><img id="bfheader107747p_08" src="images/bfheader107747p_08.gif" width="134" height="52" alt="" /><img id="bfheader107747p_09" src="images/bfheader107747p_09.gif" width="80" height="52" alt="#" /><img id="bfheader107747p_10" src="images/bfheader107747p_10.gif" width="116" height="52" alt="#" />
</div>

Why is the last image left aligned under AND in Firefox it looks really bad.

Thanks for any help

singersower

[edited by: tedster at 2:05 am (utc) on Jan. 11, 2005]

[tedster]

Depending on the width of the window, many of those later images will fall into a new row. It looks as though you have coded the page assuming the everyone will have your set-up.

You need to rethink this and design a bit more of a "liquid layout" to accomodate different screen resolutions and windows that are not full screen as well. SOmething in that layout needs to be flexible rather than fixed width. If you nail it all down with tables or with absolute position, then some visitors will have a side scroll.

[singersower]

any tips on making a graphic image "liquid"? Ultimately I was hoping to make it a Flash header with moving clouds.

Any help is GREATLY appreciated.

singersower

[tedster]

I'd say not to make the entire header an animation - it would be distracting to the eye trying to read statis text when something else is moving anyway.

One approach is to find or create an area in your header that can be filled with a solid color (background) - or perhaps a tiled background image. Then let that area take up all of the "remaining" screen width.

Limiting your 'absolutely required' width for graphics to 744 px will allow 99% of screen resolutions to see your page without any horizontal scrolling. Then let this tled color or image take up the rest of the screen - however much there may be.