Best way to containing floated images in articles?
On pages like the Yorkshire Trip 2006, I contain the images in a <div class="picture"> which does a simple float: left;.
However, the perrenial problems with this technique are present. In wide viewports and/or when using small text sizes, the floats stack up across the page. The final float also spills out of the bottom of the content area.
My idea is to use the "add a float to fix a float" technique to contain each floated image with its related paragraph. This container is itself floated and given width: 100%; to prevent the images stacking up.
I've build a Yorkshire Trip 2006 mkII demo of this technique. Does this seem like an acceptable workaround?
| Code: |
| <div class="picture">
<img width="205" height="115" src="yorkshire-trip-2.jpg" alt="This ride on a mini train was great fun!"> <p>On Saturday we went to York first to the Railway Museum where you learn about all the different trains and how they work. Then we went to the Yorvik Museum which is about Vikings. First you went in a small cinema which takes you back in time to 976AD but it over shoots that time so then you get out and go on this ride to get back to this day. As you go round you see all different things and you smell the smells that they would have back in their day. Then we went to York Minster which was good because we walked round and looked at everything.</p> </div> <div class="picture"> <img width="205" height="140" src="yorkshire-trip-1.jpg" alt="A group of students exploring a spooky cave."> <p>On Sunday we went to the Treak Cliff Cavern where we got to go down a mine and look at the Blue John stone. After that we went to the National Photographic Museum at Bradford where we got to watch a I-max film which is a 3D movie on a 5 storey high screen. On Monday we went to Ponds Forge Pool for a swim in a wave machine and rapids. Then we went to Meadowhall to do some shopping. After that we came home.</p> </div> |
| Code: |
| #content .picture {
float: right; margin: 0; width: 100%; overflow: hidden; } #content .picture img { display: block; float: right; } #content .picture img { margin: 0 0 1em 1em; } |
Share: 
I'd like to know if there are any problems with this technique before I rework ~100 pages. Please comment!
Share:
Looks alright to me 
IMHO it is better to avoid text alongside pictures as it allows text to flow naturally. The only change I would make is to place the images in the centre making it look as if the lack of text is deliberate.
Mike Abbott
Accessible to everyone
Share:
It seems fine to me, too. In some ways, having the pictures more explicitly associated with their texts because of their co-containment in the .picture <div> makes more sense to me.
It's not just the image itself which is part of the .picture content group, it's also the corresponding text.
I agree with Mike though, that centering the images would look a lot more logical. Having them floated right with the rest of the content width blank next to them just looks very accidental...
Share:
looks good, perhaps captions associeted with the images would help tie them to a specific block of text...http://www.opsi.gov.uk/acts/acts1995/Ukpga_19950050_en_8.htm#mdiv57
Share:
For appearance, I prefer 2 column CSS for images and text - like this page. Each to his own, of course 
Share:
Oh crud, I must've uploaded the wrong page during a recent update to the test site. It's supposed to look like the page Kiwibrit has linked to. I've uploaded the correct Yorkshire Trip page now. 
Unfloating and centring the images was a method I tried out at the start, but the school weren't so keen on it. This way integrates the images more with the text, like BBC and other article-based sites do.
I thought about captioning the images, but they already have alt text. It's difficult to think of a second text description for every image without cutting text out of the main articles.
Share:
| Cerbera wrote: |
| Oh crud, I must've uploaded the wrong page during a recent update to the test site. It's supposed to look like the page Kiwibrit has linked to. I've uploaded the correct Yorkshire Trip page now. |
Whoops! Well, I like this look better, on the whole. The inline photos are more journalistic. I was more commenting on your code before, which I feel is actually a very logical solution (more logical than your original version, honestly!)
Share:
| Cerbera wrote: |
| Oh crud, I must've uploaded the wrong page during a recent update to the test site. It's supposed to look like the page Kiwibrit has linked to. I've uploaded the correct Yorkshire Trip page now. .......... |
I really like the look of that. Don't have time for more analysis at the moment. But it looks so good I will study it more.
Share:
...much better, the images are now easier to relate to the copy. , and I can see no problems with the code...
...I'd try it in an older IE though just to make sure... (notoriously difficult to get floats & clears to work correctly)
http://www.opsi.gov.uk/acts/acts1995/Ukpga_19950050_en_8.htm#mdiv57
Share:
As Jim suggests, there is a problem with IE 5 and 5.5.
Check out the Browsercam captures.
Share:
Oh, smeg.
Looks like the first <div class="picture"> drops below the sidebars in IE5.x in Window. My best guess is that 5.x/Win versions are calculating the width: 100%; for the .picture class from the wrong element, although #content should have triggered hasLayout. Hmm...
The IE5.x editions must be using the CSS1 rules for height, which only state that they "may" ignore height. In CSS2 it states that a percentage height is ignored when the parent has no height. Since CSS2 is from 1998 I thought even 5.x browsers would follow that. Ignorance was bliss!
What are the workarounds for these issues in IE5.x? The main layout columns are working fine and they are using float. Not having access to IE5.x means I can't poke them myself.
Share:
Skyzx.com took them down, but you can still get IE standalones from the Evolt archives.
I recommend that you also read Taming Your Multiple IE Standalones (fix conditional comments and display version numbers).
Share:
Guess what I'll be doing this evening? 
Share:
| Cerbera wrote: |
|
What are the workarounds for these issues in IE5.x? The main layout columns are working fine and they are using float. Not having access to IE5.x means I can't poke them myself. |
The best workaround for this problem is to not give IE<6 stylesheets...
...or a different stylesheet - conditional comments are your friend.
none of that CSSHackery rubbish...
http://www.opsi.gov.uk/acts/acts1995/Ukpga_19950050_en_8.htm#mdiv57
Share: