CSS Problem :(

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
blade_922
Forum Contributor
Posts: 132
Joined: Wed Jul 12, 2006 4:57 pm

CSS Problem :(

Post 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.
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post 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" );
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
Post Reply