When the browser window width is reduced below the width of the page on http://www.ukauctioneers.com the left hand side of the page is disappearing under the left side of the window. This is a particular problem for visitors with 800 x 600 screen resolution (unfortunately we still have some :)

I've been meddling with the CSS for some time but can't seem to get to the right setup to prevent it.

Any ideas would be hugely appreciated.



1 answer

o.k.w 2355

The reason is due the unsual way of placing the margin and positioning of the 'head-strap' (including the child elements) and 'outer-container' <DIV>.

Using Firebug, I injected the following to override your CSS's position and margin properties for 'outer-container' elements and it looks alright in FF3.6

<div id="out-container" style="margin: 0pt auto; position: static;">

The header will need a little more work as you have quite a number of absolute-positioned items.

The general concept is to not use any absolute positioning, the default (if not set) will be 'static'. To centralised them, use the trick margin: x auto; where 'x' is the top/bottom while left and right will automatically be the same hence centralising the element.

Answered over 9 years ago by o.k.w
  • Thanks... I'll have a look into that. I think we had the margin set to 0px auto originally but if I remember rightly it didn't render properly in IE6. I'll give it ago and feedback here. Thanks again... Graham Pengelly over 9 years ago