Floating images of different sizes

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.

www.animals-in-distress.net


Thanks
Gerald

Grytpype-Thynne wrote:

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.

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

Nikolaos Giannopoulos wrote:

Grytpype-Thynne wrote:

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.


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

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

Grytpype-Thynne wrote:

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.
[snip]

I had a similar but not identical objective. I was given help that resulted in
the following. It is a bit strange because I hit problems with getting it to
work with different browsers, so I'm not sure what the theoretical answer is.
(I think some browsers didn't align in the centre):

URLs:

http://www.barry.pearson.name/photog...95_22_23_3.htm

http://www.barry.pearson.name/assets..._dark_grey.css

HTML:

<div class="outer">
<div class="middle">
<div class="inner"><img src="eg95_22_23_3.jpg" height="378" alt="Sally
Lightfoot Crab, Grapsus grapsus" width="700"></div>
</div>
</div>

CSS (I think "inner" and "middle" are irrelevant in your case):

body { background-color: #191919; background-image: url(dark_grey.gif);
text-align: center; }

div.outer { display: table; width: 10%; margin: 0 auto; }
div.middle, div.inner { padding: 7px; border: solid #000000 1px; }
div.middle { border-left-color: #666666; border-top-color: #666666; }
div.inner { border-right-color: #666666; border-bottom-color: #666666; }

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/