1 reply [Last post]
mslibby's picture
Last seen: 18 years 38 weeks ago
Timezone: GMT-8
Joined: 2004-03-08
Posts: 5
Points: 0

I'm attempting to set up a fixed width version of the 3 col layout I've been working on, since I haven't yet mastered the fluid version.

The fixed with version is here:


It looks good, except that when you resize the browser window, the left column content moves over and sits on the middle column. This happens in IE 6. Refreshing the page moves the content back to where it should be, but I'd like to avoid it happening altogether.

Any help is appreciated!

ClevaTreva's picture
A hilly place, UK
Last seen: 4 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Left col content moves on window resize?


If you want to use a 3 column layout, I can assure you it is VERY difficult to do across browsers.

Two sites offer workable solutions (Full Height means that if content is too small, browser window is filled and any footer is at bottom of screen):

www.pmob.co.uk (Fixed Width or Fluid Width, both Full Height)


www.positioniseverything.com (Fixed width and Fluid height)

This latter site lists many of the bugs in IE, including the one you see, with fixes.

Please note that Your menu bar isn't centered in Mozilla or Safari. It is aligned to the left sidebar and overhangs the right more. It then slides off the page when you re-size smaller.

You need to set a min-width for your body the same as the width of maintabs div. This will only be seen by Mozilla, as IE ignores it.

You may also need to break the maintab div out from the design a bit by making it position:absolute; to get it to center in Mozilla.

You text-align:center to center bits in IE, but this won't work for IE Mac. You center bits in Mozilla by using margin:0px auto; but IE Mac may ignore this. Ideally set the margin like this:

When things break out of their container in IE, try adding position:relative to the style of the div. Try it on the content div.

Don't put text directly inside a styled div (except for one styled for text only). Instead, put it inside <p> 's or a div styled just for the text. IE Mac will bite you otherwise.

Your feature div has both width and border but no Box Model Tan Hack, see position is everything (above) for the hack. Othwerwise IE 5.x Win will get it wrong and make the width narrower than you wanted (it includes borders in the width you give it - crazy but true).

I started out with the csscreator tool too, but it lacks much once you start to use it. You have to be so careful not to break it.