¶ I’ve been playing around with ways of displaying images in variable width columns, particularly with images that are wider than their container. Please cast your eye over my experiments:
Try shrinking an expanding your window with different browsers. I’d welcome any comments and suggestions for more methods.
Comments
1
For your experiments with three images, the first option works best simply because at the lowest width, all images stack vertical on the same left margin.
The experiment with the larger images is brilliant, especially number three: “A medium image with a width of 100% and a max-width> equal to the actual image size (no height set)”. This maintains the integrity of the picture at various sizes, and degrades nicely in IE.
For very wide (especially panoramic) images, the fourth option is ideal, but doesn’t work in IE 5.5, leaving option six as the best bet.
2
-> Experiments with three images
Since there are three images, did you consider putting them in a list? I have tried, and display:inline does not seem to work. Float does.
Imagine your images require a caption. You could nest a defintion list in each <li>. _
The methods I liked, were 1, 3, and 5. 2 jumps out and 4 superimposes when resized small. The effect by 3 is interesting. I prefer 1 over 5 when resized small, because it looks more uniform.
3
For the single image: floated with overflow: hidden (#5). Consistent placement of elements of an image can be achieved, with it filling any space.
For the three images: positioned L, R and centre (#4). Interesting overlapping effect on small windows, maintaining a single-image or collaged appearance.
nice!
4
I’ll second Craig’s comment on the third version for wide images. So nice, I may have to try it the next time I want to insert a wider image into my main column. Thanks Richard.
I wonder if the minmax.js (http://www.doxdesk.com/software/js/minmax.html) people have been telling me about will make IE/Win recognize the max-width property here too.
5
Zelnox: I’ve got some working experiments with putting images in a list – both with floats and with display:inline
Single image #5 doesn’t display in my copy of Camino (0.7 on panther), and multiple images #3 and #4 both seem to overlap badly when the window is too narrow.
Very nice work though…
6
I’m using a similar technique to the medium image at 100% on the PNCA site:
http://www.pnca.edu
While the technique doesn’t degrade in the version 4s all that well, I find that the image quality stays surprisingly good even at very large widths/heights.
7
The wide-image experiment doesn’t seem to render so nicely in IE5.5/win2k.
#1 is OK
#2 works
#3 is ugly (because of course IE and max-width don’t get along)
#4 and 5 don’t work at all (overflow is not cut properly)
#6 and 7 are OK but as aardvark says, “an image is an image is an image”, so maybe it’s bad practise to ‘pervert’ your image insertion with a div, I don’t know
8
Within limits, both experiments work fine for me in Safari 1.1.
Mind you, I’m not sure why I’d want to shrink my browser window, which is what I’m asked to do. I guess I could have a mail client open at the top right or something.
If I shrink the 3-image experiment enough sideways scrolling gets invoked, although the layout, so to speak, postpones that. I shouldn’t mind if it were invoked earlier in the shrinking processs.
And is sideways scrolling necessarily a bad thing? I don’t know. It doesn’t seem to matter here:
http://www.csszengarden.com/?cssfile=019%2F019%2Ecss
If these layouts work and look good in most UAs they could be nice to use sometimes in some situations.
But I wonder whether there is some “liquid ideology” behind this. Some view that my layout must be liquid.
Does the main content area of a page have to “fit” my browser window, meaning must it be always “landscape” and never “portrait”? If I use the right-hand side of a page to display a background image is that “wrong”, too?
9
Here’s a handy max-width replacement for IE which uses IE-specific logic in the CSS.
10
Nice work! I’ll third for the third version for wide images.
Bonus-> Adding ‘text-align:center’ for that ‘p’ centered the image nicely in Opera, which respects max-width.
11
I am trying to expand on your three column section by making 3 boxes (150px each) and having them sit inline.
This has posed a problem for me as I am fairly new to CSS layout and positioning.
Here is what I modified from your code, to make this happen:
begin code
<style type=”text/css”>
.story {
border-left:1px solid #a9a9a9;
border-right:1px solid #a9a9a9;
margin:0 15% 2em 15%;
padding:0.25em 2.07% 0 2.07%;
}
IMG {padding:4px; border:1px solid #a9a9a9}
#img4 {text-align:center; position:relative; width:100%;}
#img4a {position:absolute; left:0; width:150px; border: 1px solid #000; display:inline;}
#img4b {width:150px; border: 1px solid #000; display:inline;}
#img4c {position:absolute; right:0; width:150px; border: 1px solid #000; display:inline;}
</style>
<body>
<div class=”story”>
<h2>a try at using text instead of images.</h2>
<p id=”img4”>
<a id=”img4a”>Pellentesque in felis quis tortor consectetuer condimentum. Phasellus nibh nibh, interdum sit amet, sagittis nec, cursus sit amet, dolor. Duis scelerisque tortor. Aenean nec turpis. Curabitur nulla mauris, gravida eu, ultrices id, aliquam nec, mauris. </a>
<a id=”img4b”>Pellentesque in felis quis tortor consectetuer condimentum. Phasellus nibh nibh, interdum sit amet, sagittis nec, cursus sit amet, dolor. Duis scelerisque tortor. Aenean nec turpis. Curabitur nulla mauris, gravida eu, ultrices id, aliquam nec, mauris. </a>
<a id=”img4c”>Pellentesque in felis quis tortor consectetuer condimentum. Phasellus nibh nibh, interdum sit amet, sagittis nec, cursus sit amet, dolor. Duis scelerisque tortor. Aenean nec turpis. Curabitur nulla mauris, gravida eu, ultrices id, aliquam nec, mauris. </a>
</p>
</div>
</body>
end code
As you can see, the problem here is the middle column as always. So wher e am I going wrong?
Thanks.
12
If you only have one block level image, I found you can set the right margin to a large negative number to prevent the drop. I only have ie and fire fox. I can get opera, but wonder if anyone can test it in other browsers.
13
I’ve been having major problems with IE float drops in liquid columns; since we have multiple users editing content, the problem has cropped up whenever they’ve added a table or an image that’s too wide. Incredibly frustrating.
I finally found a solution for it yesterday: with the code here, IE puts a horizontal scrollbar at the bottom of the content block if the content is too wide. It may not be what the W3C asked for, but at least it keeps your page from breaking!
http://crowstoburnaby.com/index.php/2005/02/07/fixing_the_pc_ie_float_drop_bug
I hope this is of use to somebody…
14
Another approach, and this isn’t as flexible, might be to allow the image to overflow visibly into the margin. This is exactly what example #1 is doing in modern browsers, but IE needs a little help. IE mangles overflow: visible when set explicitly, but overflow is visible by default, right? Yes, for text (see http://www.quirksmode.org/css/overflow.html ) , but this doesn’t work for images. The box expands to accommodate the contents. So I came up with a little workaround to pull the image out of the flow:
http://www.divinentd.com/2004/01/ie-overflow-visible-bug-workaround.html
It’s not the best, and my site’s probably a poor testing ground (being a fixed width currently) but I hope the trick might be of use to somebody.
Add your comment
Comments are now closed on this post. If you have more to say please contact me directly.