467,910 Members | 1,774 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,910 developers. It's quick & easy.

Box with Image + Footer; how to avoid max-width, max-height?

Hello,

the html below displays a box (#container) with a #footer and
an #image inside. Is there any way how I could get rid of
declaring max-width and max-height for the #image?
The #image should fill up all the space left in the #container.

<html><head></head><body><style type="text/css">
#image { max-width: 200px; max-height: 90px; }
#container { position: fixed; width: 200px;
height: 100px; background-color: gray; }
#footer { position: absolute; bottom: 5px; }
</style>
<div id='container'>
<img id='image' src="http://www.google.com/intl/en_ALL/images/
logo.gif"/>
<div id='footer'>footer</div>
</div>

I'd be very thankful for any help with this issue.

Best,

Sven

Apr 11 '07 #1
  • viewed: 3335
Share:
3 Replies
In article
<11*********************@d57g2000hsg.googlegroups. com>,
"Sven C. Koehler" <sk******@gmail.comwrote:
Hello,

the html below displays a box (#container) with a #footer and
an #image inside. Is there any way how I could get rid of
declaring max-width and max-height for the #image?
The #image should fill up all the space left in the #container.

<html><head></head><body><style type="text/css">
#image { max-width: 200px; max-height: 90px; }
#container { position: fixed; width: 200px;
height: 100px; background-color: gray; }
#footer { position: absolute; bottom: 5px; }
</style>
<div id='container'>
<img id='image' src="http://www.google.com/intl/en_ALL/images/
logo.gif"/>
<div id='footer'>footer</div>
</div>

I'd be very thankful for any help with this issue.

Best,

Sven
Why are you putting the footer in the container? Or the style
below the head? If you want to get rid of the max-width, what is
stopping you? Nothing is stopping you from using width instead.

Is this what you want:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cats in sinks</title>

<style type="text/css">
#image {width: 100%; height: 100%; }
#container { position: fixed; width: 200px;
height: 100px; background-color: gray; }
#footer { position: absolute; bottom: 5px; }
</style>
</head>

<body>
<div id="container">
<img id='image'
src="http://www.google.com/intl/en_all/images/logo.gif"
alt="google logo"></div>
<div id="footer">footer</div>

</body>
</html>

?

Oops... I forgot, John Hosking is dealing with the case of cats
in sinks.

--
dorayme
Apr 11 '07 #2
dorayme wrote:
Why are you putting the footer in the container? Or the style
below the head? If you want to get rid of the max-width, what is
stopping you? Nothing is stopping you from using width instead.

Is this what you want:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cats in sinks</title>
....
>
<body>
<div id="container">
<img id='image'
src="http://www.google.com/intl/en_all/images/logo.gif"
alt="google logo"></div>
<div id="footer">footer</div>
</body>
</html>
?

Oops... I forgot, John Hosking is dealing with the case of cats
in sinks.
LOL

Actually, I ended up deciding to put the cats on the <tableand let the
chips fall where they may.

You are welcome to put any footers under the container and the cat under
the sink, as you feel appropriate.

--
John
Apr 11 '07 #3
On Apr 11, 11:49 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
#image {width: 100%; height: 100%; }
Heh.

#image {max-width: 100%; max-height: 100%}

That's what I wanted to do. Thanks for pointing out the obvious!

-S.

Apr 12 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

14 posts views Thread by Eric Lindsay | last post: by
7 posts views Thread by madhu2845 | last post: by
5 posts views Thread by Richard Shewmaker | last post: by
3 posts views Thread by roN | last post: by
1 post views Thread by Cartoper | last post: by
1 post views Thread by gnewsgroup | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.