I use YUI CSS grids to build templates. So this time I need to stick the footer at the botoom, and I tried some techniques, but I need to do an hybrid of these to find the solution.
Here is the code.
[css]
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>YUI CSS Footer in botom</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" />
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.7.0/build/base/base-min.css" />
<style type="text/css">
/*<![CDATA[*/
html, body
{
margin:0;
padding:0;
height:100%;
}
#doc3
{
background:gray;
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
width:auto;
margin: -61px auto 0 auto;
padding-bottom: 61px;
}
#hd
{
padding-top: 61px;
margin:0 auto;
width: 900px;
}
#bd
{
background:orange;
margin:0 auto;
width: 900px;
}
#ft
{
background:blue;
position: absolute;
bottom: 0 !important;
bottom: -1px; /*For IE */
width:100%;
height:61px;
}
/*]]>*/
</style>
</head>
<body>
<div id="doc3" class="yui-t7">
<div id="hd" role="banner"><h1>Header</h1></div>
<div id="bd" role="main">
<div class="yui-g">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam
elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa
sit amet dignissim cursus, quam lacus feugiat.</div>
</div>
<div id="ft" role="contentinfo"><p>Footer</p></div>
</div>
</body>
</html>
[/css]
You can view this technique in this working website.
Pingback: Web Development Tools | Uncategorized | Information about Social Bookmarking Software, Social Bookmarking Tool