IE Column Float Problem

I have a page with IE columns, but when made to small, they mess up.

[revolocity]

I am making a typical three column layout for a site. It is created using nested floating. But when the page is made to small, it will screw up all the columns. Obviously you have to make it pretty small to see this, but I want to prevent it. All the columns are sized by precentage, but I want to have minimum widths as well (which should fix the problem with layout mess ups). I was able to achieve this in everything (Opera, Netscape, Mozilla) using the "min-width" attrib but not in IE 6.

Any ideas?

I looked through tutorials online and they all had the same problem. Look at this page for example: [css.maxdesign.com.au...]

If you make it really small, the columns mess up. The one difference between their example is that mine has to have the minimum widths.

Thanks you!

[edited by: heini at 9:43 am (utc) on Nov. 19, 2003]
[edit reason] please don't post your urls, see Charter for explanation / thanks! [/edit]

[1beb]

Place the elements inside of another div element and set the width and set the position as static

( thanks for asking the question becuase you just solved my problem by making me think about from another perspective!)

use the

width:NUMBERpx; and
position:static;

on the encapsulating div element

Regards,

1beb

[Max_Power]

I am experiencing a similar probem (I think). Is there a way to do this without resorting to setting an absolute pixel size for an outer div? Although my div layout only has two columns, i'd like them both to be able to shrink with the window, but only to a certain minimum size to prevent the page from looking funky.

[revolocity]

Exactly....your solution static solution works (thanks) but more as a last resort, because i would like the two sidebars to be up against the edges (ie, the center expanding depending on page size, but with no minimum).

Thanks

[1beb]

you could specify and it won't cause any problems unless you start using relative positioning... which really isn't nescessary unless you start having clipping or overflow problems.

left:0; <!-- for left column -->
righ:0; <!-- for right column -->

and

width:auto; <!-- for middle column -->

Max_Power: you can use a percentage to define an elements size...

Regards,

1beb ( I need sleep forums are addictive! )

[Max_Power]

Thanks for the quick reply.

I know that percentages can be used to specify size; in fact, that's what I've been trying to do. My layout is as follows:

Body
-----Container div
----------Header
----------Left Column, Right Column
----------Footer

As of right now, the left column is floated left, and right column is floated right. I've tried setting the width of the left column to 20% and the width of the right one to 75% (they overlap in some browsers if i set the right one to 80%), but eventually the right column moves underneath the left one as i make the window smaller.

I don't mind the idea of setting a pixel size for the left column because it's supposed to be a small part of the page. However, the right column takes up so much of the page and is mostly text; it seems odd to me that it might not be able to shrink with the window.

If my problem seems too different from the one that started this topic, I'll start a new one.

[1beb]

Hrmmmm... well so long as you remember that there is no such thing as small when you reference a pixel size... because really it's a matter of perspective, the person with 640x480 won't like you very much if the have to scroll left-right-top-bottom to see your website...

[revolocity]

Let me try to be a little more clear....

The problem/requirements that I can't seem to get are:
1) The center column must have a width of at least 400px, but should expand on larger windows.
2) The left sidebar should have a minimum width of 150px, but also expand percentage wise (about 19%)...right now the center content and this are grouped in a left floating div.
3) The right sidebar should have a minimum width of 200px, with a width about 26%.
All in all, the page should be about 800px wide.

I got all this to work in everything but IE6. On most browsers, when the window is too small, just a horizontal scrollbar shows up. But on IE6, everything gets messed up when the window gets to small (see the SS).

The one other possible solution that I want to avoid is having the sidebars being position absolute and using margins to place the content. The problem with this (although you cannot see it in the SS) is that there is a copyright bar that on small content pages would appear directly below the content, therefore interfering with the sidebars.

Any ideas? Sorry that I am making this so complicated and specific, but I think there really is a way to do this...

Thanks.

[edited by: heini at 9:44 am (utc) on Nov. 19, 2003]