Hi, It's probably best I post an example to show the problem I am having: http://www.accommodation-uk.net/wsn/links/testing-epsom-1291.html How can I firstly make the div expand to fit the unknown image size (I know the max size - the image shown is at the max size) and secondly if there is just text and no image to accommodate that. I hope someone can help! many thanks.
Normally if you set no widths, a div will automatically try to fill the width of the screen. Because of the lines, I dunno where you'd put the image to not make it look like it was covering stuff up. You could float the image right. You'd list it first in the html, before the text that is next to it. The width must be declared somewhere, so in the HTML is good if you're adding the images by hand. If a machine/template/cms is adding the images, it must declare the widths in the HTML so the css for the floats will work for every page, with different images. If your div is a fixed width in pixels, you can never guarentee that the image will always fit. You could give your div a % width and margin: 0 auto so it's got a bit more flexibility. But I'm not sure if I'm answering your question. *Edit: oh I'll bet you want there to be a white space if there's no image present? Then keep the float in the css, and give the text a right margin of the width of whatever the biggest image will be. You could make the margin smaller too, whatever looks goo when there's no image, because a large floated image appearing will make the text wrap either way. If you don't want the white space, then do nothing. The text only gets butted back by the float. No floated image present, text just flows like normal.
Hi stomme poes, Thanks for your suggestions. I have tried some variations of what you suggest but I am still not getting anywhere. Here's what I have for the div: .details1 { padding: 10px; margin: 10px; font-size: 12px; background: #FDFEFF; border-style: solid; border-width: 1px; border-color: #004455; } Code (markup): And for the image I have: } img.alignright, img[align="right"] { float:right; margin: 2px 0px 2px 10px; } Code (markup): I just want to achieve the div expanding to take an image if there's one present or just expanding to fit the text if there is no image (or a small image) present. I appreciate any further suggestions you can give me. many thanks, Jez.
Well, this isn't going to be very popular, but tables would handle exactly what you want to do very easily and I can't figure out why the standards didn't allow for table like behavior in other block elements (div, p, h1....). But since they didn't, you are stuck with the limitations of floating, which means you have to explicitly set the widths, margin.... of the divs. You can use Javascript to dynamically set these widths based on the width of the pic. Even though the float is part of the standards, it really seems more like a hack to me and an odd way to do simple things like what you are trying to do. After all, floats were initially designed to do exactly what it's name says, float text around an image or other section, but they decided to use it for many other things that should have instead been handled the way tables are handled. Remember, when you float something, it is no longer part of the flow of the page. It acts almost as if it doesn't exist, which is why you are seeing only your text wrap around the image, but not your divs.
I see. Well at least I understand the problem now! Thanks for the explanation. It's a real shame if there is no way around this as I like the way the wrapped text looks.
Well, I never say never. Someone might know a really clever workaround, but I've seen this problem before and I've yet to see anyone answer it. Seems endemic of the design of the standards which didn't appear to give full consideration to variable dynamic content. But there's no big deal in using a table for those last sections and pure css for the rest of the page. The table is a block level element like everything else, except it doesn't automatically stretch the width of the container. So you can insert it into your scheme with no trouble at all. If you style everything (table, tr td) in css except the cellspacing attribute for your table, you'll end up having plenty clean code and you can give it semantic names (<td id="picture">). I wish I knew a better way because I don't like resorting to tables out of a matter of best practices principles. But it does offer guaranteed results.
Another workaround is to make sure you zero out your right and top margin or padding for the pic so that it's flush against the top right of the area. This will cover the right side of your divs and would probably look fine. Or, if you don't want it flush, then put a 10px white border on the right side of the image to cover up those div borders.
A little bit bored so having a play around and came up with something that is starting to look like it might work for you I changed the following tags to get the page as it is shown @ img.alignright, img[align="right"] { height: auto; width: auto; margin: 2px; float: right; background-color: #F6ECED; border: 1px solid #000000; padding: 3px; } .details1 { padding: 10px; margin: 10px; font-size: 12px; background: #FDFEFF; height: auto; clear: left; float: left; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #004455; border-left-color: #004455; } I added the image height and width to the image tag (though it works if you don't put them in too), and added <p></p> to the text to give you more control to play with. Also the image tag was embedded inside your <span class="labels">Description of testing epsom:</span> so I moved it from their and placed it with the text. I'm no css expert but it looks like it is half way to where you want it. I'm sure if you play around a little bit more you'll get it spot on. I've only tested it in Firefox so it might need a tweak to get it to work in IE. I would also suggest you change the <span class="labels">Description of testing epsom:</span> for <h2></h2> tags for better SEO.
Thanks Blame Me, That does look better, I'll have a further play with the code tomorrow I appreciate your and Arnold9000's help. Jez