Real problems with 3 col layout in IE6

[gh05]

Hi, Being quite new to CSS I just don’t know how to fix this problem in a free script which I’ve found on the internet and changed for myself. Basically it displays as I want it to in every browser apart from IE6 where the contents of the right column fall to the bottom of the page.

See the advert on the right hand side here: http://yourweddingplan.co.uk/testpage.html which drops to the bottom of the page.

My css code is available here http://www.yourweddingplan.co.uk/skidoo_toooldie.css (Was too long to post here).

Any help or advice would be greatly appreciated. I have seen other 3 column layouts but if possible I’d like to stick with this one as I’ve spent quite a bit of time getting this one to look as I want for most browsers.

[Paul O'B]

Hi,

The element in the right column is larger than the space available and therefore the float drops. The right column is sized in ems but your element is in pixels so you must make sure that you have enough space for it.

e.g.In the IE only stylesheet make these changes.

#outerColumnContainer
{
    /* reserves space for the left and right columns. you can use either
     * padding, margins, or borders, depending on your needs. however you
     * can use the border method to create a background color for both left
     * and right columns
     */
    border-left: solid 14em #fff;
    border-right: solid 15em #fff;
}

#rightColumn
{
    float: right;
    width: 15em;
    margin: 0 -15em 0 1px;
    z-index: 2;
}

Or perhaps instead you could hide the overflow but you may get clipped content.

#rightColumn
{
    float: right;
    width: 14em;
    margin: 0 -14em 0 1px;
    z-index: 2;
    overflow:hidden;
}

Note that you should really only put the differences in the IE stylesheet and not the whole css file as that makes maintenance a nightmare.

[gh05]

Hi Paul,

Many Thanks for the reply. I've tried making the changes you suggested and am having mixed results.

The first change (making the right column widtsh and margins = 15em) just pushes not only the right column down to the bottom of the page but also the left one. I've also experimented with different widths and get the same result.

The second change (Adding overflow:hidden) works on a wide screen monitor but on a normal monitor it causes the right column to become quiet distorted with the contents again out of place.

Can you recommend why I might still be getting these problems?

btw, the script skiddootoo_oldie.css is a script for just IE browsers less than 7 because I was having some other rendering problems with Internet Explorer which couldn't be fixed by using the same stylesheet.

Thanks, GH

[RyanReese]

Hi, try this

#rightColumn
{
	float: right;
	width: 14em;
	margin: 0 -14em 0 -1px;
	background:purple;
	z-index: 2;
}

[Paul O'B]

Hi Paul,

Many Thanks for the reply. I've tried making the changes you suggested and am having mixed results.

The first change (making the right column widtsh and margins = 15em) just pushes not only the right column down to the bottom of the page but also the left one. I've also experimented with different widths and get the same result.

Did you also make the changes to the border width on #outerColumnContainer as shown in my code above? They work together to provide the column effect.

Did you also make the changes only to the IE stylesheet as mentioned?

I tested it and it was working fine in IE and FF. Just removing the wide element would have shown that everything was in place.

I'll have another look later and see if you changed something else or if some other changes were needed.

btw, the script skiddootoo_oldie.css is a script for just IE browsers less than 7 because I was having some other rendering problems with Internet Explorer which couldn't be fixed by using the same stylesheet.

Thanks, GH

Yes but you should only include the differences as there is no need for that mass of code at all. You probably only need a few hacks in there at most otherwise IE6 has to load 2 stylesheets every time and maintenanace is a nightmare.

(The skidoo layout is basically a re-hash of Doug Livingstone's original that he first showed of in these forumns in about 2003. )

[gh05]

Hi, try this

#rightColumn
{
	float: right;
	width: 14em;
	margin: 0 -14em 0 -1px;
	background:purple;
	z-index: 2;
}

Doesn't seem to have any effect. Thanks though.

[gh05]

Did you also make the changes to the border width on #outerColumnContainer as shown in my code above? They work together to provide the column effect.

Did you also make the changes only to the IE stylesheet as mentioned?

I tested it and it was working fine in IE and FF. Just removing the wide element would have shown that everything was in place.

I'll have another look later and see if you changed something else or if some other changes were needed.

Yes, i made the changes to #outercolumnContainer too. It's difficult, because like i said the changes fix it on a wider screen monitor but not on my standard monitor where I get problems.

Yes but you should only include the differences as there is no need for that mass of code at all. You probably only need a few hacks in there at most otherwise IE6 has to load 2 stylesheets every time and maintenanace is a nightmare.

Ok I'll keep that in mind and cut down the code in the IE6 script once I'm happy with the layout.

(The skidoo layout is basically a re-hash of Doug Livingstone's original that he first showed of in these forumns in about 2003. )

I chose this layout because it seemed like one of the more simple (and easy to change) 3 column layouts I'd seen. It does seem quite 'fiddly' though and I'm a bit concerned that in future (say if i want to add adverts to the right column which are larger than the current one) that I will have the same problems I'm experiencing now. Can you recommend any changes that would make future changes simpler?

When i was going through this CSS tutorial yesterday, I noticed that they actually use a table for the layout and CSS for the styling. I've read that this is a generally a bad idea, but it seems like it might be simpler to control positioning than with margins and floats etc... What do you think?

Many Thanks for your help again.

[Paul O'B]

When i was going through this CSS tutorial yesterday, I noticed that they actually use a table for the layout and CSS for the styling. I've read that this is a generally a bad idea, but it seems like it might be simpler to control positioning than with margins and floats etc... What do you think?

Many Thanks for your help again.

Hi,

Looking at your page (although I realise it's still in development) I don't understand why you are using the equal column methods when you don't actually have any column backgrounds?

If you are adding backgrounds in at a later date then that's ok but if all columns are white then you don't need all that complicated code at all. Just a couple of floats would suffice.

As mentioned earlier if you are using ems for the widths then your content must be in ems also. There is no point in having a an em based container that holds pixel width content as you won't know if it will fit especially if text is resized smaller and the em based container shrinks but the pixel sized container won't.

If you have pxiel width content then I would also make sure you have pixel width columns (or vice versa).

There is no need to use a table layout for a simple 3 column especially if you don't need equalising columns.

As I mentioned above the problem with the right column dropping is a width issue and if you remove the padding from the rightcolumn .inside you will see that the element now fits.

#rightColumn .inside {padding: 0;}

You could then add padding or margins to the inner elements in that column instead where needed (not on the ad though because that is already too wide as mentioned already).

[gh05]

Hi,

Looking at your page (although I realise it's still in development) I don't understand why you are using the equal column methods when you don't actually have any column backgrounds?

If you are adding backgrounds in at a later date then that's ok but if all columns are white then you don't need all that complicated code at all. Just a couple of floats would suffice.

As mentioned earlier if you are using ems for the widths then your content must be in ems also. There is no point in having a an em based container that holds pixel width content as you won't know if it will fit especially if text is resized smaller and the em based container shrinks but the pixel sized container won't.

If you have pxiel width content then I would also make sure you have pixel width columns (or vice versa).

There is no need to use a table layout for a simple 3 column especially if you don't need equalising columns.

As I mentioned above the problem with the right column dropping is a width issue and if you remove the padding from the rightcolumn .inside you will see that the element now fits.

#rightColumn .inside {padding: 0;}

You could then add padding or margins to the inner elements in that column instead where needed (not on the ad though because that is already too wide as mentioned already).

Hi Paul,

I don't know if it's just the screen size that I'm using but adding padding:0; (even in conjunction with other changes) doesn't seem to make a difference for me.

I'm going to try changing to pixels instead of ems and hope that i can figure it out from there!

Thanks,

GH

[Paul O'B]

Hi,

I need you to make the change I suggested above and upload the page so that I can see what's going on.

At present you have not added the CSS to this file or the main file.

I have your page running locally using the code I suggest without the right column dropping in IE6 (although of course the min and max widths won't work in ie6).

Upload the page with the padding changes and then I can look and see why you say it's still dropping.

[gh05]

Hi,

I need you to make the change I suggested above and upload the page so that I can see what's going on.

At present you have not added the CSS to this file or the main file.

I have your page running locally using the code I suggest without the right column dropping in IE6 (although of course the min and max widths won't work in ie6).

Upload the page with the padding changes and then I can look and see why you say it's still dropping.

OK this is bizarre (at least to me). I'd made those changes locally and it didn't change anything. Now I've made those changes online and www.yourweddingplan.co.uk/testpage.html now works fine.

The thing i find strange is that I then added a bit more content to testpage.html and called it www.yourweddingplan.co.uk/testpage2.html and now on certain monitors BOTH columns are dropping down to the bottom of the page. Seems strange because I haven't added any wide objects in the left or right columns.

So while it's brilliant that testpage.html is now working, I don't feel in a position to add any content to it yet.

Thanks.

[Paul O'B]

So while it's brilliant that testpage.html is now working, I don't feel in a position to add any content to it yet.

You need to think things through a little bit as there is always a reason

You have a table in the middle of the page that holds the bookmark and share icons and you have the table cellspacing set to 90px which means that the minimum width of that table is about 530px. Therefore the minimum page width is about 936px before the right floated column will drop because it can't find enough any more room.

Your options are to change that table so that there is no cellspacing and the items are just centred and can then collapse to content width only (set cells to 50% wide center content within each cell).

Or hide the overflow on the center column but content will clip.

#middleColumn{overflow:hidden!important}

Or set a min-width to stop the page before it reaches it's minimum (will need js or an expression for IE6).

If you have a fluid width columns then you must ensure your content in that column is fluid also. There is no point in having a fluid width middle column if you are going to place a fixed element in the middle of it as something will have to give.

[gh05]

If you have a fluid width columns then you must ensure your content in that column is fluid also. There is no point in having a fluid width middle column if you are going to place a fixed element in the middle of it as something will have to give.

Hi, Thanks yet again for your advice.

I've made the changes you said to the table (think i made the correct changes) but am now getting a slightly different variation of the same problem. I've attached a screenshot so you can see what I mean (http://a.imagehost.org/view/0255/testpage2 ). It seems that the middle column isn't able to expand for some reason and the left and right columns have slipped down to the bottom again.

[Paul O'B]

Hi,

It's probably safest to use the overflow:hidden that I offered above.

#middleColumn{overflow:hidden!important}

For your table you need to do this:

table.share{
    width:100%;
    text-align:center;
}
table.share td{width:50%}

<table class="share" cellspacing="0">
                            <tr>

That should stop it dropping but will clip the table at small widths which shouldn't be a problem as something has to give.

[gh05]

Hi,

It's probably safest to use the overflow:hidden that I offered above.

#middleColumn{overflow:hidden!important}

For your table you need to do this:

table.share{
    width:100%;
    text-align:center;
}
table.share td{width:50%}

<table class="share" cellspacing="0">
                            <tr>

That should stop it dropping but will clip the table at small widths which shouldn't be a problem as something has to give.

Hi Paul,

It's much better now in that I can get it displaying as I want it. Only trouble is it doesn't display properly straight away....i.e. initially the middle column is still not expanding and the overflow:hidden seems to be cutting off the 'share' button. Then if i hover over the bookmark button, the window which opens causes the middle column to expand and the page to display properly.

The bookmark and share buttons seem to be spaced out again so I'm not sure if the cellspacing=0 is working? or if this would even have anything to do with it?

Thanks.

[Paul O'B]

and the overflow:hidden seems to be cutting off the 'share' button

Yes that's the idea - It stops the float from dropping but will clip the content as I mentioned but only at small screen sizes. You could allow the page to get smaller by not using a table for the share buttons and just floating them left so that they can wrap although that will mean they sit on top of each other and may not be very usable.

You have to understand that IE will always try to drop a float when there is no room left and as I mentioned earlier you may be better of with a min and max width
layout. They are your only real options as far as ie6/7 are concerned and you either hide the overflow or you stop the page getting smaller before the float drops.

I'm still wondering why you need the skiddoo layout as you don't have equal column colours unless you are adding these in later.

Maybe a better solution would be to have a fixed width layout for IE6 and then a min and max width layout for everyone else.

Only trouble is it doesn't display properly straight away

It's probably something to do with all those nestings in the skidoo layout and I guess the width isn't defined until the content is placed inside which takes a second to happen. (It may also be the script delaying things a bit also.) I'll have to look into that but I have to do some work today so it will have to wait until later

[gh05]

Yes that's the idea - It stops the float from dropping but will clip the content as I mentioned but only at small screen sizes. You could allow the page to get smaller by not using a table for the share buttons and just floating them left so that they can wrap although that will mean they sit on top of each other and may not be very usable.

You have to understand that IE will always try to drop a float when there is no room left and as I mentioned earlier you may be better of with a min and max width
layout. They are your only real options as far as ie6/7 are concerned and you either hide the overflow or you stop the page getting smaller before the float drops.

I'm still wondering why you need the skiddoo layout as you don't have equal column colours unless you are adding these in later.

Maybe a better solution would be to have a fixed width layout for IE6 and then a min and max width layout for everyone else.



It's probably something to do with all those nestings in the skidoo layout and I guess the width isn't defined until the content is placed inside which takes a second to happen. (It may also be the script delaying things a bit also.) I'll have to look into that but I have to do some work today so it will have to wait until later

Hi Paul,

I'm not planning to add background colours at the moment so would be happy with a layout like the max/min layout that you have posted. Is there a demo of that script anywhere?

I dont understand why the skidoo script is only used where 'equal column colours' are needed?

Thanks

GH

[RyanReese]

min-max layout
http://www.pmob.co.uk/temp/min-max-3col.htm

[Paul O'B]

I dont understand why the skidoo script is only used where 'equal column colours' are needed?

Because it uses negative margins to drag the left and right columns from the center column into the wide borders of the parent. These borders provide the full column colours that the float now sits on top of. That's the basis of the layout and you don't need that structure if you don't want equal columns as a basic floated layout would work.

If you don't need equal columns and you don't need content first then three simple floats without any trickery could have been used and simplified the page. You will still run into the issue of float drop but the layout would be much simpler.

I have some updated 3 column examples here that have a min-max width added for ie6 via js. The first is a basic example and the second is more advanced example with equal columns and a sticky footer.

http://www.pmob.co.uk/temp/3col-min-max-basic.htm
http://www.pmob.co.uk/temp/3col-stic...r-min-max2.htm