CSS styling - To the bottom? - HTML Forums

tehhparadox · 11-03-2009, 01:04 PM

hi guys

I'm just posting a new thread to ask if there is a way to make a div tag stick to the bottom.

this code worked at the start:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
.content1 {
	border: 1px solid #CCC;
	width: 44%;
	margin-left: 10px;
	float: left;
	padding: 10px;
}

.tail {
	position: absolute;
	text-align: center;
	width: 99%;
	height: 20px;
	padding: 5px;
	background: rgb(230, 230, 230);
	bottom: 0%;
}
</style>
<body>
<div class="content1">
  <p>This is div tag class content1</p>
  <p>&nbsp;</p>
</div>
<div class="tail">
this is the div tag class is tail
</div>

</body>
</html>

The bottom: 0%; bit made the tail div tag stick to the bottom no matter what the screen res. But as this site is dynamic, the content1 tag changes and it may get longer than a page. If so, the tail div does not stick to the bottom.

This is an example of that:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
.content1 {
	border: 1px solid #CCC;
	width: 44%;
	margin-left: 10px;
	float: left;
	padding: 10px;
}

.tail {
	position: absolute;
	text-align: center;
	width: 99%;
	height: 20px;
	padding: 5px;
	background: rgb(230, 230, 230);
	bottom: 0%;
}
</style>
<body>
<div class="content1">
  <p>This is div tag class content1</p>
  <p>askldjfas
    alksdjfsa
    a;sikjfd
    a;lksjdf
    ;akjsdf </p>
  <p>a;dskjf</p>
  <p>as;kdfj</p>
  <p>aklsjdf</p>
  <p>sadklfj</p>
  <p>as;ldfj</p>
  <p>'alksjfd</p>
  <p>fds</p>
  <p>&nbsp;</p>
  <p>a;lksdjf</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>a'kajfd</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>a;skdjf</p>
  <p>&nbsp;</p>
  <p>a\s;dkflj</p>
  <p>a'lksfd</p>
</div>
<div class="tail">
this is the div tag class is tail
</div>

</body>
</html>

What CSS would I use to make the tail div tag stick to the bottom of the page no matter what the screen size or browser?

Help would be very much appreciated

Pegasus · 11-03-2009, 03:13 PM

Try using margin-bottom: 0px; rather than bottom: 0%;

tehhparadox · 11-03-2009, 03:23 PM

Thanks for the reply but that doesn't work either. The tail div tag is still above the content div tag when it is supposed to be at the bottom.

Excavator · 11-03-2009, 06:18 PM

Hello tehhparadox,
The problem with ap your div at bottom:0;, as you've already seen, it's bottom of the first screen it sees. If you scroll content, the div is still stuck at the bottom:0; it started at.

Here is a full height solution that is pretty easy and very stable/cross browser compliant - http://nopeople.com/CSS/full-height-layout/index.html

tehhparadox · 11-04-2009, 12:38 PM

thanks for the reply

As far as I can see, the nopeople website made the footer tag stay at the bottom with a wrap div.. or am I wrong? how do you suggest I could do to make the tail div tag stay at the bottom?

I'm not very good at html and css. Sorry

¥åßßå · 11-04-2009, 12:53 PM

You're wrong

Make html && body 100% ... hide the scrolls, slap your content in an absolute div bottom/right 0,0 && 100% width/height ... add an overflow auto and then position your footer absolute ... make sure it's not inside your content/wrap div

Examples of fixed header/footer/other bits ( warning : whore my own sites alert

)

fixed header
fixed header/footer
fixed "sidebar"/footer

¥

tehhparadox · 11-04-2009, 01:27 PM

Thank you!

Your instructions were clear and it worked

. I will use this technique although (I know I wasn't very clear) in my question I was talking about the footer tag at the bottom that you can see by scrolling down to the bottom, rather than a tag that always stays at the bottom of the browser. Thank you anyway