By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,493 Members | 1,920 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,493 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Share this Question
Share on Google+
3 Replies


P: n/a
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

P: n/a
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

P: n/a
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.