Page 1 of 1

CSS Problem :(

Posted: Tue Nov 14, 2006 11:36 am
by blade_922
Hey guys.

Im having a problem with my template.

Its 3 columns blog format.

|Content Column|left col|right col|

Ok so the right and left columns are joined together. I have put the content column to width 500px and sometimes if an image is bigger that 500px width it moves the right n left column under the content. How can i make it so that it never does this, so if the image is 600px then 100px is not shown of the image and the layout stays fine.

Posted: Tue Nov 14, 2006 12:07 pm
by John Cartwright
I think your looking for the max-width attribute, although if memory serves IE and max-width don't get along. You could try something like

Code: Select all

width:expression(document.body.clientWidth > 800? "800px": "auto" );

Posted: Tue Nov 14, 2006 4:56 pm
by matthijs
Or maybe you are looking for overflow:hidden ?

The problem with IE is that it will always expand a box when the content gets larger then the box. Other browsers don't do that.

Posted: Tue Nov 14, 2006 5:34 pm
by Chris Corbyn
Jcart wrote:I think your looking for the max-width attribute, although if memory serves IE and max-width don't get along. You could try something like

Code: Select all

width:expression(document.body.clientWidth > 800? "800px": "auto" );
I have never seen that syntax before.... does that use JS then I assume? Interesting.

Posted: Wed Nov 15, 2006 1:36 am
by matthijs
Yeah those are quite handy. I've used them in situations were I wanted min/max width. Placing the IE expressions in a seperate IE stylesheet (fed to ie with conditional comments) keeps it clean. More info here and here.

But I do wonder if this is a solution for the original question, about the problem of floats dropping below each other in IE due to the expanding box problem in IE. Even if you set a fixed width in IE a box will expand if the content is larger. So whether or not a max-width with an expression will prevent this from happening I don't know. Should test that.

My first thought was to use the overflow property. However, using overflow hidden one must think about the fact that the content isn't accessible/viewable anymore in that situation. So overflow: scroll might be another option to consider.