Nikolaos Giannopoulos wrote:[color=blue]
> Grytpype-Thynne wrote:
>[color=green]
>> Is it possible to give a width to a floated div which is greater than
>> the width of the image it contains?
>>
>> What I want to do is display some images which will be of different
>> sizes so that they have their centers vertically aligned, I was
>> thinking of using a fixed width container with one image floated left
>> and one right with the images centered in their respective boxes and
>> then the same down the page.
>>
>> I am using a table to obtain the effect on the site at the moment in
>> the awards received pages.[/color]
>
>
> Have you tried something like the following:
>
> In HTML:
>
> <div class="box">
> <img src="img1.jpg width="50">
> </div>
>
> and CSS:
>
> .box {text-align: center; width: 100px}
>
> I haven't tested it but if I understand you correctly it should work -
>
> --Nikolaos[/color]
Just saw your reference to awards received - no the above will not do
what you want to do - at least not exactly - as it will work with 1 not
2 columns.
What you can do is use the above as a start and modify it to work for 2
columns:
<div class="box">
<img src="img1-left.jpg width="50">
<img src="img2-left.jpg width="40">
...
</div>
<div class="box">
<img src="img1-right.jpg width="50">
<img src="img2-right.jpg width="40">
...
</div>
and CSS:
..box {float: left; text-align: center; width: 40%}
You will need to wrap the above html in a div and use margin: auto for
left and right to center both columns on the page.
If you want to line up the text underneath both images as in the awards
page then you'll probably want to do the above but with one image (per
row) and its accompanying text for each box AND tag the 2nd box with an
id that does a clear:both so that you can do the next row with a repeat
series of boxes.
After mentioning all this I wonder have you checked on the net how to
translate this effect to CSS - I'm sure that this has been done before
for thumbnails and I imagine that you could even find some working
examples to use.
HTH.
--Nikolaos
