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.
CSS Problem :(
Moderator: General Moderators
- John Cartwright
- Site Admin
- Posts: 11470
- Joined: Tue Dec 23, 2003 2:10 am
- Location: Toronto
- Contact:
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" );- Chris Corbyn
- Breakbeat Nuttzer
- Posts: 13098
- Joined: Wed Mar 24, 2004 7:57 am
- Location: Melbourne, Australia
I have never seen that syntax before.... does that use JS then I assume? Interesting.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 likeCode: Select all
width:expression(document.body.clientWidth > 800? "800px": "auto" );
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.
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.