CSS - Make An Image Stay At The Bottom Of A Page?

Hello

Trying to position an image at the bottom of my webpage which:

a) will always stay at the bottom of the page regardless of length (page length not window height so the position: fixed is not quite what I'm looking for)
b) will not slide on top or under divs on my page (what position: absolute does) but instead stop moving up once it reaches content above it and the scrollbar appears (as tables do)
c) I can layer divs on top of

so far this is as close as I've got:

in the html

<!-- container for site info -->
<div id="container">

<!-- other content in divs here -->

<!-- other content in divs here -->

<!-- footer for bottom image -->
<div id="footer">

<!-- footer details, who / when / copyright -->
<div id="footerdetails">
details here
</div>
<!-- footer details, who / when / copyright -->

</div>
<!-- footer for bottom image -->

</div>

and in the css

#container
{
position: absolute;
top: 0px;
width: 750px;
height: 100%;
}

#footer
{
position: absolute;
bottom: 0px;
height: 230px;
width: 750px;
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: bottom left;
}

#footerdetails
{
position: relative;
margin: 0px 0px 0px 0px;
padding: 9px 0px 10px 70px;
top: 195px;
width: 680px;
text-align: left;
voice-family: "\"}\"";
voice-family:inherit;
}

I know I'm sort of answering my question above (tables) but I've seen this done with divs, just can't get the right combination of css - anyone have any ideas on this?

Thanks in advnace.

a+
gar

Issue is I've got text that I want in a certain place on the page. I've run into this situation time and time again, thankfully I've always worked out a creative solution, however I've just been avoiding the problem. It's not something I can use center, or bottom or anything like that on. I've got an image that's in sort of an odd position on the page. I want to have a link directly centered under that image but I can't seem to get the text where I want it. Any suggestions?

Like when I make a field..

<fieldset>
<fieldset>

How can I then make something like, when typing in <text> it'll stay in a locked field. And when clicking "Save" it will send the text to my email?

Please help.

Would be really cool with a code below.

Can anyone suggest how I make sure the green 'Quick Contact' graphic/box always sit at the bottom of the right column (immediately above the Footer), no matter how much text there is in the lefthand column on this web page: www.ultimate-system.com/index.html , using css?

The stylesheet I'm using is found at www.ultimate-system.com/style.css.

Many thanks

Hi all. This is my first time posting ever so please be gentle.

On my website I have background image with stripes and grey.
I want it to go all the way down the bottom of the page.
Currently the background image stops where the content ends.
I have tried height:100%; and that solves the problem, but creates another if the user has a smaller browser window.

Can someone please help me out?

Page URL: leannemarie.com/testing_index.php
CSS: leannemarie.com/css/testing_main.css

Thanks
LeAnne

So I have 5 image rollovers onmouseover() all in a row with the following css and javascript. Currently, the left-most image rollsover just fine, but when I try to rollover the others, the image that comes to replace the rolledover one gets put in the left-most spot instead of right on top of the image that was rolledover. I can't use absolute positioning because the whole webpage is centered according to window size. Help is greatly appreciated. Here's the link: create.byu.edu/newsite

CSS:
Code:

div.info 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
} 
div.team 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
} 
div.work 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
} 
div.sites 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
} 
div.news 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
}

javascript:
Code:

var image1 = new Image(); 
image1.src = "images/info.jpg"; 
var image2 = new Image(); 
image2.src = "images/infoblue.jpg"; 
var image3 = new Image(); 
image3.src = "images/team.jpg"; 
var image4 = new Image(); 
image4.src = "images/teamblue.jpg"; 
var image5 = new Image(); 
image5.src = "images/work.jpg"; 
var image6 = new Image(); 
image6.src = "images/workblue.jpg"; 
var image7 = new Image(); 
image7.src = "images/sites.jpg"; 
var image8 = new Image(); 
image8.src = "images/sitesblue.jpg"; 
var image9 = new Image(); 
image9.src = "images/news.jpg"; 
var image0 = new Image(); 
image0.src = "images/newsblue.jpg";  

function roll(img_name, img_src)    {
    document[img_name].src = img_src;    
}

HTML:
Code:

	<div class="info">
 		<a href="info.php" onmouseover="roll('info', 'images/infoblue.jpg')" onmouseout="roll('info', 'images/info.jpg')">
 			<img src="images/info.jpg" border="0" alt="infogray" name="info">
 		</a>
 	</div><!--info-->
                <div class="team">
 		<a href="team.php" onmouseover="roll('info', 'images/teamblue.jpg')" onmouseout="roll('info', 'images/team.jpg')">
 			<img src="images/team.jpg" border="0" alt="teamgray" name="team">
 		</a>
 	</div><!--team-->
 	 	<div class="work">
 		<a href="work.php" onmouseover="roll('info', 'images/workblue.jpg')" onmouseout="roll('info', 'images/work.jpg')">
 			<img src="images/work.jpg" border="0" alt="workgray" name="work">
 		</a>
 	</div><!--work-->
 	 	<div class="sites">
 		<a href="sites.php" onmouseover="roll('info', 'images/sitesblue.jpg')" onmouseout="roll('info', 'images/sites.jpg')">
 			<img src="images/sites.jpg" border="0" alt="sitesgray" name="sites">
 		</a>
 	</div><!--sites-->
 	 	<div class="news">
 		<a href="news.php" onmouseover="roll('info', 'images/newsblue.jpg')" onmouseout="roll('info', 'images/news.jpg')">
 			<img src="images/news.jpg" border="0" alt="newsgray" name="news">
 		</a>
 	</div><!--news-->

Hi guys
I'm in little trouble, because I cannot get a little block (div) to be shown always at bottom, no matter the height of my left column
I'm making a complete tableless css layout for the first time

Look:


Here's the skeleton code
Code:

<!-- Begin Left Column -->
	<div id="cssleftcolumn">
	HERE I LOAD THE LEFT COLUMN MODULES (IT IS A CMS)
	<div id="imagedownmenu"><font color="white">this little block should go bottom!!</font></div>
	</div>
<!-- End Left Column -->

And here the css code
Code:

#cssleftcolumn { 
	width: 218px;
	float: left;
	color: white;
}

#imagedownmenu {
	background-image: url(../images/fondo_botleft.jpg);
	background-position: bottom left;
	background-repeat: no-repeat;
	height: 76px;
	vertical-align: bottom;
}

I cannot get the little image to aling at bottom, and well, I don't know if this code will be enough for you guys, so I'll be waiting for your help in case you need more info to accomplish this

Thanks a lot in advance,

Ok here is the problem I have...
I have 3 DIVS....

DIV 1 is a container the centers the contents
DIV 2 I want to wrap tight around an image
DIV 3 I want floating over the image say 100px from the top of DIV2 and 80px left.

Currently DIV 2 is as wide as it's container (DIV1). and therefore DIV 3 isn't positioned over the correct part of the image. If I made DIV 2's position absolute then DIV 2 wraps the image tightly and correctly, but it now is shown on the far left of DIV 1, and I want it in the center.

here is the HTML i have...


<div id="div1" align="center">
<div id="div2">
<img alt="fddsffsd" src="image.jpg"/>
<div class='div3'></div>
</div>


and here is my CSS...

#div2 {position: relative}
.div3 {
position:absolute;
width: 80px; height: 80px;
top: 100px; left:20px;
background-image: url(transparent.png);
}

i was able to have the image button links hover and change colors using 2 different image buttons, however i came to realize that i want to have the hovered image stay active once the button is clicked. can someone assist me with this?

this is what my code looks like:

Code:

a:hover#index {
	background: url("./images/home-red.png") 0 0 no-repeat;
}
a:hover#howto {
    background: url("./images/howtobuild-red.png") 0 0 no-repeat;
}
a:hover#installation {
    background: url("./images/installation-red.png") 0 0 no-repeat;
}
a:hover#design {
    background: url("./images/dande-red.png") 0 0 no-repeat;
}
a:hover#dean {
    background: url("./images/deansblog-red.png") 0 0 no-repeat;
}
a:hover#forum {
    background: url("./images/userforum-red.png") 0 0 no-repeat;
}
a:hover#plan {
    background: url("./images/planbike-red.png") 0 0 no-repeat;
}
a:hover#search {
    background: url("./images/search-red.png") 0 0 no-repeat;
}

a#index, a#design, a#howto, a#installation, a#dean, a#forum, a#plan, a#search   {
	width: 86px;
	height: 27px;
	float: left;
	margin-top:6px;
	position:relative;
	left: 115px;

}

a#index {
	background: url("./images/home-grey.png");
}
a#design {
	background: url("./images/dande-grey.png");
}
a#howto {
	background: url("./images/howtobuild-grey.png");
}
a#installation {
    background: url("./images/installation-grey.png");
}
a#dean {
    background: url("./images/deansblog-grey.png");
}
a#forum {
    background: url("./images/userforum-grey.png");
}
a#plan {
    background: url("./images/planbike-grey.png");
}
a#search {
    background: url("./images/search-grey.png");
}

Hi. How to make my header and footer stick to bottom?

For the header div, I have background image and a logo (test) but the bg image does stick to the bottom to touch the menu?

For the footer, it doesn't stick to the bottom of the page?

Anyone can help me out? Here's the link of the test page with css inside the source code.

Really appreciate if anyone can help. Thank you.

yourbestproduct dot com/test.html (Sorry, I'm new user so can't put exact url)

Well, I'm trying to make a comments-page for a certain thing, and I can't get the image to stop going over the bottom of the div, without using the min-height property. Can someone help? Code:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; encoding=UTF-8;" />
	<title>Comments on 2005-02-10: February 10, 2005</title>\n
	<link rel="stylesheet" type="text/css" href="comments.css" />
</head>
<body>
	<h2>Posting on 2005-02-10: February 10, 2005 in <a href="refresh.php" id="title">XMLBlog</a></h2>
	 
<div id="entry" xml:lang="en-US" lang="en-US">

	<img src="../resources/images/Neil_Euphonium_3_[F][S{600,h}][32k].png" alt="New Euphonium!" title="New Euphonium!" style="width:30%;" class="left" />
	<p class="dream">I can only remember two things...  That there were a whole bunch of people from my school playing baritones, which was kind of creepy in this case <em class="entry">and</em> that my section from school in real life and I played this freaky, nonexistent Zelda games.  One was for a calculator I had only owned in the dream, and it was spectacular!
	</p>
	<p class="normal">I brought my "newphonium" to school today.</p>
	<p class="normal">We had a pretty normal session in Jazz.  <em class="entry">Someone actually got a trombone solo.</em></p>
	<p class="normal">Our teacher was back.  The entire first half of the period going over our homework.  <em class="entry">We learned that dropping a penny off of the <strong class="entry">Space Needle</strong> is very dangerous, since even a baseball would get going at 120 MPH.</em>  Later, we began how to calculate things dealing with gravity with a position other than 0 and a velocity over 0.</p>

	<p class="happy">We didn't do much in Japanese.  All we really did was read Katakana and finish our puzzle.  <em class="entry">A few of us found new words.</em>  I also told our sensei that my real Japanese same from my ancestors is <ruby><rb>たけした</rb><rt>take****a</rt></ruby>.  During resource, I looked over this book with a couple of friends of mine and their friend.  <em class="entry">It was so funny, too!</em></p>
	<p class="normal">In Health, we continued our lecture on alcohol.  <em class="entry">There were some inspiring articles and poems on the subject.</em></p>
	<p class="happy"><span class="normal">Class started off with a lock-down.  <em class="entry">I used this time to complete a gravity-based program for physics.</em></span> to Due to my premature completion of the paragraph that was due at the end of the period, I just listened to music and read for the majority of English.  <em class="entry">A big guy in the <info popup="State of Fear">book I'm reading</info> died.</em></p>

	<p class="sad">Before actually eating, I wandered a bit.  <em class="entry">It made it so I didn't have to carry my backpack around wherever I went.</em></p>
	<p class="normal">We continued on proofs.  <em class="entry">It took a bit of effort to do.</em>  <span class="happy">Still, we finished the investigation.</span></p>
	<p class="normal"><span class="happy">I got my new euphonium for class.<em class="entry">It sounded very nice.</em></span>  Though, for a majority of the time I didn't do anything with my section, due to his preoccupation with a couple of other kids.</p>
	<p class="happy">I got a ride home</p>

	<p class="normal">I had a practice session with my mom, which wasn't the most successful.</p>
	<p class="happy">Once done with my homework, I took a two-hour nap.</p>
	<p class="dream">The entire thing revolved around this country area that had tiny roads and a <info popup="The salmon eggs would get bigger, then would grow spikes and split apart before returning to their grating to mature more">freaky salmon farm</info>.  Also, I remember psychically communicating with my section from Band.  <span class="hider">I actually cried over the idea of losing him, but I didn't have tears when I awoke.</span>  Also, my old friend, who is a freshman now, was mentioned.</p>
	<p class="happy">The dream gave me the idea to call him up.  <em class="entry">Apparently, the call woke him up.</em>  We talked about how our lives were going, along with school.  <em class="entry">Apparently, the school banned people from using their calculators.  How could they!?  He also told me that some kids were goofing around during Breakout library time.</em>  We scheduled a time to meet and talk about some more things.  <em class="entry">I could show him Linux.</em></p>

	<p class="happy"><strong class="entry">I fixed the comments system!!</strong>  <em class="entry">Have fun posting.</em></p>
</div><p>No comments</p><hr /><form action="postcomments.php?ie=&title=February 10, 2005&date=2005-02-10" method="post" name="comment" id="main">
	<div class="right">
		<img src="comments_files/right_main_bar.png" alt="right_side" />
	</div>
	<div class="left">
		<img src="comments_files/left_main_bar.png" alt="left_side" />

	</div>
	<div class="center">
		Date: <input type="textarea" class="upper" name="date" value="2005-02-10" readonly="readonly" />
		Title: <input type="textarea" class="upper" name="title" value="February 10, 2005" readonly="readonly" />
		<br />
		Name: <input type="textarea" name="name" class="lower" />
		E-mail: <input type="textarea" name="e-mail" class="lower" />

	</div>
	<div class="comment">
		<input type="textarea" name="comment" class="text" />
		<input type="submit" value="Post!" class="click" />
	</div>
</form>
</body>
</html>

CSS: Code:

h2 {
	text-align:center;
	font:bold italic 3em/1.5 'Pepita MT', 'Lucida Handwriting', 'Sans-Serif';
	color:rgb(0,150,150);
}
h3 {
	text-align:center;
	font: italic normal 2em/1.5 'Lucida Calligraphy', 'Sans-Serif';
	color:rgb(0,0,150);
}
form#main {
	display:block;
}
form#main div.left {
	float:left;
	background-color:rgb(255,255,255);
}
form#main div.right {
	float:right;
	background-color:rgb(255,255,255);
}
form#main div.left img, form#main div.right img {
	height:60px;
}
form#main div.center {
	background-color:rgb(0,0,0);
	background:url(comments_files/center_main_bar.png);
	font:bold normal 1em/1 'Times New Roman', 'Courier New', 'Sans-Serif';
	color:rgb(255,255,255);
	padding:2px 18% 2px 28%;
}
form#main div.center input.upper {
	height:20px;
	filter: alpha(opacity=50);
	-moz-opacity: .5;
	display:inline;
	width:20%;
	margin:2px 10% 2px 0;
}
form#main div.center input.lower {
	height:20px;
	filter: alpha(opacity=50);
	-moz-opacity: .5;
	display:inline;
	width:20%;
	margin:2px 8% 2px 0;
}
form#main div.comment {
	width:95%;
	border:1px solid rgb(0,150,150);
}
form#main div.comment input.text{
	width:90%;
	margin:5px 5% 5px 5%;
	height:100px;
}
form#main div.comment input.click {
	width:25%;
	margin:5px 37.5% 5px 37.5%;
}
body p {
	text-align:justify;
	font: italic normal 1.2em/1 'MS Mincho', 'SimSun', 'Sans-Serif';
	color:rgb(150,0,0);
}
a {
	color:rgb(0,100,0);
	text-align:left;
}
a:hover {
	font-weight:bold;
	color:rgb(0,255,0);
	border:1px solid rgb(0,255,0);
}
a#title {
	color:rgb(0,100,0);
	text-decoration:none;
	margin-left 25%;
	text-align:left;
}
a#title:hover {
	font-weight:bold;
	color:rgb(0,255,0);
	border:1px solid rgb(0,255,0);
}
div.comment a.mail {
	font:normal normal 1.2em/1.1 'MS Mincho', 'SimSun', 'Courier New', 'Sans-serif';
	color:rgb(0,100,0);
	text-decoration:none;
	text-align:left;
}
div.comment a.mail:hover {
	font-weight:bold;
	color:rgb(0,255,0);
	border:1px solid rgb(0,255,0);
}
div.comment span.mail {
	margin-left 25%;
	font:normal normal 1.2em/1.1 'MS Mincho', 'SimSun', 'Courier New', 'Sans-serif';
	color:rgb(0,0,150);
	text-align:left;
}
div.comment {
	border-bottom:2px dotted rgb(0,0,255);
	margin:1.5em;
}
div.comment p {
	font:normal normal 1.2em/1.1 'MS Mincho', 'SimSun', 'Courier New', 'Sans-serif';
	display:block;
}

/* ENTRY */
div#entry {
	border:4px double rgb(0,0,0);
	padding:0.25em;
	margin:0.5em;
	min-height:79em;
}
div#entry p {
	font:normal normal 1em/1.2 'Tempus Sans ITC', 'Nimbus Roman', 'Times New Roman', 'Serif';
	text-indent:2em;
	text-align:justify;
}
div#entry p.dream {
	font:normal normal 1em/1.2 'Lucida Handwriting', 'URW Chancery L', 'Serif';
	color:rgb(150,150,0);
	text-indent:2em;
	text-align:justify;
}
em.entry {
	font-style:italic;
}
strong.entry {
	font-weight:bold;
}
span.uentry {
	text-decoration:underline;
}
span.hider {
	color:rgb(255,255,255);
}
div.story {
	border-left:2px solid rgb(0,0,0);
	border-top:2px solid rgb(0,0,00;
}
div.story div.title {
	border-bottom:1px solid rgb(128,128,128);
	border-right:1px solid rgb(128,128,128);
	font:italic normal 1.5em/1.2 'Tempus Sans ITC', 'Nimbus Roman', 'Times New Roman', 'Serif';
	width:50%;
	text-align:center;
}
div.story div.storybody {
	padding:0.25em;
}
span.happy, p.happy {
	color:rgb(0,100,0);
}
span.sad, p.sad {
	color:rgb(0,0,100);
}
span.normal, p.normal {
	color:rgb(100,0,0);
}
img.center {
	margin:0.25em auto;
}
img.right {
	float:right;
	margin:0.25em;
}
img.left {
	float:left;
	margin:0.25em;
}

Figured this was simple, but I can't seem to figure it out.

Using CSS, I want to put an image on the left with text to the right aligned to the bottom. I could easily do this with a table, but I'd like to find a CSS way.

With CSS like:

.imginfo {float:none;clear:both;margin-top:1em;}
.imginfo img {float:left;margin-right:1em;}

and code like:

Code:

<div class="imginfo">
  <img src="..." />
  Line of Text<br />
  Line of Text<br />
  Line of Text<br />
</div>

I get the image on the left and the text on the right, but, the text starts at the top of the image. I want it to end up aligned to the bottom of the image.

Attempting to use vertical-align: bottom doesn't do anything with the text.

The effect I am looking for is like below. If you assume the XXX are the image...

Code:

XXXXXXXXXXXX
XXXXXXXXXXXX
XXXXXXXXXXXX
XXXXXXXXXXXX
XXXXXXXXXXXX Line of Text
XXXXXXXXXXXX Line of Text
XXXXXXXXXXXX Line of Text

Hey guys. You can run an image, a border, text, whatever you want off the top of the page, but can you do it with the bottom of the page.

Code:

.top {
	position: relative;
	left: 0px;
	top: -75px;
  }

That will of course run an image off the top of the page, but

Code:

.bottom {
	position: relative;
	left: 0px;
	bottom: -250px;
  }

this line of code will simply but the image relative to the top image and it's completely visible, meaning the user can view the entire image simply by scrolling down. I'm placing my <id>'s in tables right now, but I'm open to whatever. I simply want an image consistently, running off the top of the page and the bottom of the page at all times. Any ideas? Thanks in advance.

Does anybody know how to put one image on TOP of another? I'm using CSS, and was wondering why my image wasn't showing up....Turns out it was underneath another image, but it needs to be on top! Any clue how to fix it? Thanks!