3 column layout teaser

[stu20001]

Hi

Thanks for all the help on my previous question but now I am being baffled by another problem.

If you look here you will see I am trying to create a page with a header, 3 columns and then a footer

http://www.d-media.co.uk/demo/index.htm

...but the righthand column is sliding to the left, under the centre column until it hits the lefthand one.

Now the annoying thing is I have got the three column layout on its own to work fine and just as I want*

http://www.d-media.co.uk/demo/3colTest.htm

I can't work out why in the first page it now wants to slide left.

The stylesheet for all this is here

http://www.d-media.co.uk/demo/siteSyles.css

* this is all looking at the pages in IE6 - due to the nature of the final site (an intranet) the client has specifically stated that other browsers are not a concern - bad I know but they're the ones paying

Any help greatly appreciated

[lcscne]

either reduce the width on .righthandColumn or float it right. although floating it right will keep it below the main content container until you reduce the width to make room for it to fit in the space to the right.

[stu20001]

OK - completely removing a width declaration for the righthand column seems to work. I don't get why though.

The three columns widths are set to be 60% + 22% + 18% which = 100% so how can it be too wide??

And why does it work in the first example but not the 2nd?

Explanations greatly appreciated as always.

Cheers

[Bonner]

You need to wrap the 3 columns in another layer with a width of 100% and make sure the borders are set to none and padding and margins are set to 0 for the wrapping layer.

+-------------------------+
| +-----+ +-----+ +-----+ |
| |     | |     | |     | |
| +-----+ +-----+ +-----+ |
+-------------------------+