473,320 Members | 1,914 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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
Jul 20 '05 #1
3 5000
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

Jul 20 '05 #2
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

Jul 20 '05 #3
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/
Jul 20 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
by: Florian Brucker | last post by:
There are several tutorials on the net showing you how to create a thumbnail gallery with floating thumbails which automagically uses all horizontal space available (e.g....
3
by: Mark Carroll | last post by:
I've been wanting web pages that nicely embed images among text. The way I typically do this at the moment is to sprinkle my IMGs through the text as floats, alternating between float: left and...
8
by: Chris Beall | last post by:
I'm struggling with how to handle, on a web page, images that contain text that the user must be able to read. Examples: tombstone photos, photos or scans of historic documents (handwritten or...
19
by: Kim André Akerř | last post by:
For some reason, I can't get the middle column of this setup to work properly in IE (go figure). It looks like it's supposed to in Opera and Firefox, but now I only need it to work in IE as well. ...
1
by: Ron Vecchi | last post by:
I am using asp.net to upload an image and then perform resizing on it and saving the different sizes to file. The resized images were coming up and being displayed in the bowser fine but the image...
2
by: news | last post by:
Does anyone know how I can compress images from an asp.net app on the client before they are sent to the server. I can compress them once they are on the server fine with GDI+ functions etc but...
1
by: Lee K. Seitz | last post by:
I created this page (http://home.hiwaay.net/~lkseitz/comics/newu/publishing.shtml; CSS at http://home.hiwaay.net/~lkseitz/comics/newu/newu.css) while looking at it in Firefox 1.05 (Win 9x) and it...
6
by: Jeremy | last post by:
I've got a floating div which becomes visible when a link is clicked. I want the div to be hidden when the user clicks anywhere on the page except for whithin the div. What is the best way to do...
9
by: ssubbarayan | last post by:
Hi all, I am trying a program to convert floating point values to a byte array and printing the same to the screen.The idea behind this is we already have an existing function which can do byte...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.