Forum Moderators: not2easy
One of her newest ideas is to make images (for headline stories) a fixed height and the width variable. That's certainly possible, but it's doing unspeakable things to our layout.
The idea is to have the image on the left, a cutline below it, and then an unordered list of more headlines to the right of the picture. The list should always bump right up to the image with a 5px margin between the two and then stretch all the way to the right of the containing box. Since I will never know the exact width of the image, that's turning out to be a headache. I tried a table without specifying any widths, but that's very unreliable. I haven't been able to find any decent *fluid 2-column* layouts either. I can't really use JavaScript to get the width of the image, because the name of the image is not static.
She's not my boss, so I could tell her off and say why this is not worth the trouble, but I do like her (not like that, nope ...), and it would be a shame to get into another fight over design ideas, and we had plenty :)
Any suggestions?
overflow is a wonderful property, float the image left, insert div or just use list element and set it's overflow property to auto or hidden whichever suits your design better (if fixed height then hidden might be good)
the overflow will make the list or element neighbouring the left float(img) the equivalent of a right float which will no longer go underneath the left float (enabling your list indent preference) and also to stretch to fill the remaining width
there is an example here somewhere that I did recently will see if I can find it:
[added]
found it [webmasterworld.com] - HTML in first post, CSS in post no: #:3588052
[edited by: SuzyUK at 7:03 pm (utc) on May 2, 2008]
OK, that works nicely, however, how can I get stuff to go underneath the picture? The picture itself is only a piece of a chunk of code that comes from a .NET custom control. Below is an example of what comes out of it:
<a href="/news/story.aspx?s=24985">
<img style="border:1px solid #666;float:left;" src="/images/thumb.aspx?h=150&i=somepic.jpg">
</a>
<a class="link2" href="/news/story.aspx?s=24985">
The headline goes here
</a>
<br>
The first paragraph of the story goes here
So this entire block you see above would be the left side of the whole thing and the list would then show up on the right. I tried to wrap a left floated div around the image and paragraph, but that didn't work. I can't split that chunk up, although I can modify the chunk itself.
