Div width

Hello,

I have a div with black background and an image inside.
The image width can vary between 100px to 200px.

I would like the width of the div to adapt to the width of the image.

Is this possible?
Should I make the div width equal to the minimum with of the image, in
this case 100px?

What is the correct way to do this?

Thanks,
Miguel

On 2009-09-14, shapper <mdmoura (AT) gmail (DOT) com> wrote:

Hello,

I have a div with black background and an image inside.
The image width can vary between 100px to 200px.

I would like the width of the div to adapt to the width of the image.

Is this possible?
Should I make the div width equal to the minimum with of the image, in
this case 100px?

What is the correct way to do this?

You need a "shrink-to-fit" div, which means floating it, making it
position: absolute or fixed, or display: table-cell or inline-block.

Usually floating it has fewest side-effects and works in most browsers.
Might just need to clear stuff after it.

shapper wrote:

Hello,

I have a div with black background and an image inside.
The image width can vary between 100px to 200px.

Okay

I would like the width of the div to adapt to the width of the image.

Ooookay

Is this possible?

Yes, but it is not the "natural" behavior of a block element.

Should I make the div width equal to the minimum with of the image, in
this case 100px?

You could but I bet it will not give the results that you are looking for.

What is the correct way to do this?

I am assuming what you are looking for is the "shrink to fit" behavior
that table cells exhibit.

You could use a table.

You could float the div, but you will have to deal with the other
aspects that accompanies floats.

You could use JavaScript to resize, but then have to deal with what
happens when JavaScript is not enabled.

You could just make all your images a single or a couple of standard
widths, (e.g., small=100px medium=300px, large=600px) then make some
classes to accommodate.

<div class="bigPix"><img width="600" ...

This approach also has another benefit, it may improve your page design
making it more consistent, aesthetically pleasing and easier to read. It
is just the nature of humans to have things "line up". Random==scarey
and takes people out of their comfort-zone! ;-)


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

In article
<0aef19e4-8f8a-46cf-b287-ac431bc90688 (AT) q14g2000vbi (DOT) googlegroups.com>,
shapper <mdmoura (AT) gmail (DOT) com> wrote:

I have a div with black background and an image inside.

You have one div and one img at one time, but the same div at another
time has another image of a different size (because you change the image
manually or dynamically)? You have one div and one img and you have
another div that is very similar to the first div (being a div, having a
black background, but having an img of a different size in it)?

The image width can vary between 100px to 200px.


I would like the width of the div to adapt to the width of the image.

Is this possible?
Should I make the div width equal to the minimum with of the image, in
this case 100px?

What could min-width possibly do? In the case of images, unlike with
text, divs are already minimum width of the image.

What is the correct way to do this?

Say what more exactly you are doing.

(How is that Portuguese food I ordered from you coming along?)

--
dorayme

On Sep 14, 11:51*pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

Say what more exactly you are doing.

Basically I am working on a simple centered design for a photographer
portfolio.
It contains a menu with only 2 buttons and under it a photo.

The photo is generated from a database and can have two formats:
landscape or portrait.
I would like to not leave empty space on the right and left of the
portrait photo.

So I have two options:

1. Make the width of all portrait photos equal to the width of the
landscape photos.
The problem is this way the portrait photos become much larger
than the landscape ones.
The advantage is that the site width is always the same which is
better for the eyes as mentioned before.

2. Make the container div resize to image width.
I would make portrait images a little bigger then landscape so
that the width don't vary much.
The menu is not a problem since it contains only two buttons so it
will always fit inside the div.

I am considering choosing (1) but I would like to see how (2)
would look like ...

(How is that Portuguese food I ordered from you coming along?)

Portuguese food is really really good but what is good takes
time ... :-)

How is the food in down under? You eat cangurus? :-P

Thanks,
Miguel

In article
<3da9c8d5-eab3-49ba-afa1-43d715cf9ea8 (AT) f10g2000vbf (DOT) googlegroups.com>,
shapper <mdmoura (AT) gmail (DOT) com> wrote:

On Sep 14, 11:51Â*pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:
Say what more exactly you are doing.

Basically I am working on a simple centered design for a photographer
portfolio.
It contains a menu with only 2 buttons and under it a photo.

The photo is generated from a database and can have two formats:
landscape or portrait.
I would like to not leave empty space on the right and left of the
portrait photo.


So I have two options:

1. Make the width of all portrait photos equal to the width of the
landscape photos.
The problem is this way the portrait photos become much larger
than the landscape ones.
The advantage is that the site width is always the same which is
better for the eyes as mentioned before.

No, forget this, you simply get too tall with this.

2. Make the container div resize to image width.
I would make portrait images a little bigger then landscape so
that the width don't vary much.
The menu is not a problem since it contains only two buttons so it
will always fit inside the div.

I am considering choosing (1) but I would like to see how (2)
would look like ...

Why are you insisting on the DIV being visible rather than as a mere
container for the purpose of ... well... general contentment... sorry I
was thinking of food... I meant containment (inline IMGs generally
needing not to be loose in BODY).

If the picture is in the middle of the browser window, if the menu is
there above with its two buttons and the photo is there sitting quietly
under, is it a nice dark background you want around the picture with the
same width left and right of both portrait and landscape? How about
assigning a border to the pictures then?

Something like this but of course, just one pic per page... I have links
for buttons just to illustrate:

<http://dorayme.netweaver.com.au/landscape_portrait_which.html>

(How is that Portuguese food I ordered from you coming along?)

Portuguese food is really really good but what is good takes
time ... :-)

Now! What I said above should be worth one of those caldo verde soups,
chicken on the spit jobs for main with all the trimmings and one of
those pastel de natas to finish off with?

How is the food in down under? You eat cangurus? :-P

Sunday I ate snapper grilled with chips and Greek salad at La Peruse,
Tues I ate Lebanese at Lakemba, Wed it was Vietnamese at Marrackville,
tomorrow it will be Sri Lankan, getting the picture? No, I did not eat
wichita grub or roo or snake tonight, pork chops actually! <g>

--
dorayme

On Sep 17, 11:18*am, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

Why are you insisting on the DIV being visible rather than as a mere
container for the purpose of ... well... general contentment... sorry I
was thinking of food... I meant containment (inline IMGs generally
needing not to be loose in BODY).

I am insisting on the div because:

1. The menu buttons should be left aligned to the picture left.
2. The menu container should have a grey background and it should have
the same width of the picture.

So you will see a gray menu bar the has a picture just under it.
Both have the same width.
The menu buttons are left aligned in the menu bar.
And in conjunction that are centered in the page.

Imagine a table with two rows and one column:
First row has the menu with gray background and buttons left aligned.
The second row contains the picture.
The table width is the same as image width, either being portrait or
landscape.
The table is centered in the page ...
That is basically what I am looking ... With div's.

Do you want me to post a design of it online?

Now! What I said above should be worth one of those caldo verde soups,
chicken on the spit jobs for main with all the trimmings and one of
those pastel de natas to finish off with?

"chicken on the spit jobs" what? lol

So you've been to Lisbon ...
Caldo Verde and Pasteis de Natas are really good in the winter that is
now coming ...
.... But I would change for your summer that I suppose it is almost
starting ...

Sunday I ate snapper grilled with chips and Greek salad at La Peruse,
Tues I ate Lebanese at Lakemba, Wed it was Vietnamese at Marrackville,
tomorrow it will be Sri Lankan, getting the picture? No, I did not eat
wichita grub or roo or snake tonight, pork chops actually!

Ah I am completely wrong about Australian food. :-)

In article
<d51d51a9-3bc2-4f6a-8cf6-ab85326858ce (AT) d21g2000vbm (DOT) googlegroups.com>,
shapper <mdmoura (AT) gmail (DOT) com> wrote:

On Sep 17, 11:18Â*am, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

Why are you insisting on the DIV being visible rather than as a mere
container for the purpose of ... well... general contentment... sorry I
was thinking of food... I meant containment (inline IMGs generally
needing not to be loose in BODY).

I am insisting on the div because:

1. The menu buttons should be left aligned to the picture left.

OK, but quite why are you doing this? Is it so important?

2. The menu container should have a grey background and it should have
the same width of the picture.

Right, OK. Let's see now, if I can modify what I gave you before...
er... how about... how about... with a slight relaxation of the rules:

<http://dorayme.netweaver.com.au/landscape_portrait_which2.html>

Tell me to my face that this is not worth an Arroz De Marisco or a Bife
De Atum or at least a nice pequeno almoço (be quick, I have not eaten
yet today)!

The buttons will break out to the sides at very large user text-sizes.
Nevertheless, it might do for 98% of your audience.

No? You want it perfect in respect to fluid? Remember that anything with
a set pixel width that has text associated with it must break at some
point in most browsers. So you can hardly object to this inherent
imperfection.

At some point you must be prepared to compromise.

Why not get down and dirty and get the job done with like:

<http://dorayme.netweaver.com.au/landscape_portrait_which3.html>

What do you suppose will happen? Will North Korea be influenced to speed
up development of a plutonium bomb or will Iran accelerate its nuclear
weapon ambitions?

--
dorayme

shapper wrote:

On Sep 17, 11:18 am, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

snip

Ah I am completely wrong about Australian food. :-)

Last night we had "Coat of Arms" stew - Kangaroo and a little smoked
Emu in a red wine sauce, with Wattle seed dumplings! Try doing that
with any other country's coat of arms. Where do you get Unicorns these
days? And I imagine you'd be "renditioned" if you tried a Bald Eagle.

Phil

--
Phil Kempster
http://kempster.info

On Fri, 18 Sep 2009 15:38:55 +0930, Phil Kempster wrote:

Last night we had "Coat of Arms" stew - Kangaroo and a little smoked
Emu in a red wine sauce, with Wattle seed dumplings! Try doing that
with any other country's coat of arms. Where do you get Unicorns these
days? And I imagine you'd be "renditioned" if you tried a Bald Eagle.

Strictly speaking, one might expect to be extraordinarily *rendered*.

If we can count on the current U.S. administration to live up to the image
of Mr. Obama, then said rendering would be done *with style*, which could
almost bring this thread around to being on topic for this NG.

And now I'm wondering what a Presidential Seal tastes like...

--
John
http://en.wikipedia.org/wiki/Extraordinary_rendition_by_the_United_States
says the term is sometimes known as "irregular rendition"; which then makes
it a discussion of IE.