Float image to bottom right in stretching window

Forum Moderators: not2easy

Message Too Old, No Replies

Float image to bottom right in stretching window

optik

10:03 am on Jun 13, 2009 (gmt 0)

What is the best way to have an image stick to the bottom right of the screen for a window of any size?

optik

10:20 am on Jun 13, 2009 (gmt 0)

this would seem to be it...

<head>
<style type="text/css">
body,html {
background-color: #000000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
height:100%;
}
</style>
</head>

<body>

</div>
</body>

swa66

11:05 am on Jun 13, 2009 (gmt 0)

To do it with CSS instead of (ab)using tables, try position:fixed e.g.:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>untitled</title>
    <style type="text/css">
      * {
        margin:0; /* reset */
        padding:0;
      }
      html {
        background-color: black; /* from your example */
      }
      body {
        color: yellow; /* to see the text */
        padding-bottom: 100px;
        /* to make sure it can scroll to clear the image */
      }
      #logo {
        display: block;
        position: fixed;
        bottom:0;
        right:0;
        width: 100px; /* just an example */
        height: 100px; /* just an example */
      }
    </style>
  </head>
  <body>
    <img id="logo" src="1.jpg" alt="description" />
    <p>replace me with a long text in order to get scrollbars</p>
  </body>
</html>

Leaving testing (and fixing it for) IE as an exercise for the reader ;)

Position fixed is not supported in IE6, you'll need to use something like IE7.js or use a more graceful fallback if you still care about that browser.

swa66

11:19 am on Jun 13, 2009 (gmt 0)

If you want it to scroll off the screen if your content gets too large for the screen, position: absolute could be used as well.