Trying to create a CSS box that is always is always the width of an image placed inside it (and no w

[Deryck]

Hi,

I'm trying to create a box in CSS that will contain a single image and a
copyright acknowledgement. The copyright acknowledgement will always be
wider than the image and I want the copyright to start a new line(s) when it
reaches the width of the image (to avoid wasted space above the copyright).

This is what I wrote:

..mapbox{
position: relative;
float: left;
padding-right: 10px;
padding-bottom: 10px;
border: 0px;
width: 625px;
font-size: 0.8em;
}

It does exactly what I want for the first image (which is 625 pixels wide).
The second image is just 500 pixels wide so I get a gap of 125 pixels if I
use .mapbox again.

Since I (currently) only have 2 images I just created .mapbox2 with width
set to 500px. That works too but it doesnt really seem the way to go.

Is it possible to have the box set to the width of the image and no more and
have no wasted white space?

If you want URLs rather than the above, see

http://www.longhope.co.uk/getting_here.php
and
http://www.longhope.co.uk/getting_here2.php

Comments and advice on the colours of the headings and links would also be
appreciated.

The code validates.

Thanks

Deryck

 

[Neal]

Hi,

I'm trying to create a box in CSS that will contain a single image and a
copyright acknowledgement. The copyright acknowledgement will always be
wider than the image and I want the copyright to start a new line(s)
when it
reaches the width of the image (to avoid wasted space above the
copyright).

This is what I wrote:
(snip)

It does exactly what I want for the first image (which is 625 pixels
wide).
The second image is just 500 pixels wide so I get a gap of 125 pixels if
I
use .mapbox again.

Since I (currently) only have 2 images I just created .mapbox2 with width
set to 500px. That works too but it doesnt really seem the way to go.

It is. By default all boxes are as wide as possible. You need to specify
the precise width, as you did.

Perhaps more elegant is to set up the styles other than the width in
..mapbox, and the width in .img1, .img2, etc. Then the HTML:

<div class="mapbox img1">

should apply both classes to the element.

 

[Mitja]

Hi,

I'm trying to create a box in CSS that will contain a single image
and a copyright acknowledgement. The copyright acknowledgement will
always be wider than the image and I want the copyright to start a
new line(s) when it reaches the width of the image (to avoid wasted
space above the copyright).

This is what I wrote:

.mapbox{
position: relative;
float: left;
padding-right: 10px;
padding-bottom: 10px;
border: 0px;
width: 625px;
font-size: 0.8em;
}

It does exactly what I want for the first image (which is 625 pixels
wide). The second image is just 500 pixels wide so I get a gap of 125
pixels if I use .mapbox again.

Since I (currently) only have 2 images I just created .mapbox2 with
width set to 500px. That works too but it doesnt really seem the way
to go.

Is it possible to have the box set to the width of the image and no
more and have no wasted white space?

The first thing that reminded me of was table based layout. If you have a
cell with width:100px and the content doesn't fit (e.g. it's a 200px wide
picture), the cell will automatically stretch.
You can also achieve this with the div of yours by applying display:table to
it. It works for me in Opera 7.5, but Ie still support it, so I'm afraid
it's useless to you.

What with that, you're best off sticking to what Neal suggested. If you keep

 

[Mitja]

Oh yes... One more thing

Hi,

....
http://www.longhope.co.uk/getting_here.php
and
http://www.longhope.co.uk/getting_here2.php

Comments and advice on the colours of the headings and links would
also be appreciated.

I don't like the grey background of a:hover. I'd change it for something
lighter or, better yet, dump it altogether and make it a:hover{color:#bbb}.
Another info - some people (not me) insist on links having to be underlined.

Another thingie: change
<a href="...">foo |</a> <a href="...">bar</a>
to
<a href="...">foo</a> | <a href="...">bar</a>
in the main menu.

 

[derek giroulle]

Hi,

I'm trying to create a box in CSS that will contain a single image and a
copyright acknowledgement. The copyright acknowledgement will always be
wider than the image and I want the copyright to start a new line(s) when it
reaches the width of the image (to avoid wasted space above the copyright).

perhaps you could check on the site
http://www.dynamicdrive.com/dynamicindex17/index.html
you can find scripts that do exactly what you want and dynalically adjust

derek