Hi,
i'm stuck with what seems to be a major flaw on css.
what i'm trying to do is have the divs #apoios and #fundo always aligned to the bottom, regardless of the size of the #content div
i'm trying to get something like #apoios with a fixed height of 30px and #fundo with 305px aligned to the bottom and the #content div height would adapt to the resolution
can it be done?
help would be really appreciated
thx in advance
feel free to test the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html,body {
background-image: url(img/bg_amarelo.gif);
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
height: 100%;
}
#container {
width:484px;
height:100%;
margin:0px auto;
text-align:center;
padding:0px;
background-image:url(img/bg_preto.gif);
background-position: 0px 0px;
vertical-align : bottom;
}
#fundo {
background-color:#cccccc;
width:470px;
height:305px;
padding:0px;
}
#apoios {
background-color:#999999;
width:470px;
height:30px;
background-color:#FFFFFF;
margin:0px;
padding:0px;
text-align: left;
}
#content {
width:470px;
background-color:#cccccc;
}
-->
</style></head>
<body>
<div id="container">
<div id="content">text sample</div>
<div id="fundo"><img src=http://www.webdeveloper.com/forum/archive/index.php/"img/.jpg" width="470" height="300">
</div>
<div id="apoios">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"img/.gif" hspace="5" vspace="5"><img src="img/.gif" hspace="5" vspace="5">
</div>
</div>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html,body {
background-image: url(img/bg_amarelo.gif);
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
height: 100%;
}
#container {
width:484px;
height:100%;
margin:0px auto;
text-align:center;
padding:0px;
background-image:url(img/bg_preto.gif);
background-position: 0px 0px;
vertical-align : bottom;
}
#fundo {
position: fixed;
background-color:#cccccc;
top: 100%;
margin-top: -305px;
width:470px;
height:305px;
padding:0px;
}
#apoios {
position: fixed;
top: 100%;
left: 20px;
margin-top: -30px;
width:470px;
height:30px;
background-color:#000;
}
#content {
width:470px;
background-color:#cccccc;
}
-->
</style></head>
<body>
<div id="container">
<div id="content">text sample</div>
<div id="fundo"><img src=http://www.webdeveloper.com/forum/archive/index.php/"img/.jpg" width="470" height="300">
</div>
<div id="apoios">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"img/.gif" height="30"><img src="img/.gif" height="30">
</div>
</div>
</body>
</html>didn't do it. i'm testing it on ie6.
what i get is the #apoios div on top and nothing else
still trying to figure this.
thx in advanceTry absolutes then (I should have done that in the first place
):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html,body {
background-image: url(img/bg_amarelo.gif);
margin: 0px;
}
#container {
width:484px;
height:100%;
margin:0px auto;
text-align:center;
padding:0px;
background-image:url(img/bg_preto.gif);
background-position: 0px 0px;
}
#fundo {
position: absolute;
background-color:#ccc;
top: 100%;
margin-top: -305px;
width:470px;
height:305px;
padding:0px;
}
#apoios {
position: absolute;
top: 100%;
left: 20px;
margin-top: -30px;
width:470px;
height:30px;
background-color:#000;
}
#content {
width:470px;
background-color:#cccccc;
}
-->
</style></head>
<body>
<div id="container">
<div id="content">text sample</div>
<div id="fundo"><img src=http://www.webdeveloper.com/forum/archive/index.php/"img/.jpg" width="470" height="300">
</div>
<div id="apoios">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"img/.gif" height="30"><img src="img/.gif" height="30">
</div>
</div>
</body>
</html>
i'm stuck with what seems to be a major flaw on css.
what i'm trying to do is have the divs #apoios and #fundo always aligned to the bottom, regardless of the size of the #content div
i'm trying to get something like #apoios with a fixed height of 30px and #fundo with 305px aligned to the bottom and the #content div height would adapt to the resolution
can it be done?
help would be really appreciated
thx in advance
feel free to test the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html,body {
background-image: url(img/bg_amarelo.gif);
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
height: 100%;
}
#container {
width:484px;
height:100%;
margin:0px auto;
text-align:center;
padding:0px;
background-image:url(img/bg_preto.gif);
background-position: 0px 0px;
vertical-align : bottom;
}
#fundo {
background-color:#cccccc;
width:470px;
height:305px;
padding:0px;
}
#apoios {
background-color:#999999;
width:470px;
height:30px;
background-color:#FFFFFF;
margin:0px;
padding:0px;
text-align: left;
}
#content {
width:470px;
background-color:#cccccc;
}
-->
</style></head>
<body>
<div id="container">
<div id="content">text sample</div>
<div id="fundo"><img src=http://www.webdeveloper.com/forum/archive/index.php/"img/.jpg" width="470" height="300">
</div>
<div id="apoios">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"img/.gif" hspace="5" vspace="5"><img src="img/.gif" hspace="5" vspace="5">
</div>
</div>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html,body {
background-image: url(img/bg_amarelo.gif);
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
height: 100%;
}
#container {
width:484px;
height:100%;
margin:0px auto;
text-align:center;
padding:0px;
background-image:url(img/bg_preto.gif);
background-position: 0px 0px;
vertical-align : bottom;
}
#fundo {
position: fixed;
background-color:#cccccc;
top: 100%;
margin-top: -305px;
width:470px;
height:305px;
padding:0px;
}
#apoios {
position: fixed;
top: 100%;
left: 20px;
margin-top: -30px;
width:470px;
height:30px;
background-color:#000;
}
#content {
width:470px;
background-color:#cccccc;
}
-->
</style></head>
<body>
<div id="container">
<div id="content">text sample</div>
<div id="fundo"><img src=http://www.webdeveloper.com/forum/archive/index.php/"img/.jpg" width="470" height="300">
</div>
<div id="apoios">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"img/.gif" height="30"><img src="img/.gif" height="30">
</div>
</div>
</body>
</html>didn't do it. i'm testing it on ie6.
what i get is the #apoios div on top and nothing else
still trying to figure this.
thx in advanceTry absolutes then (I should have done that in the first place
):<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html,body {
background-image: url(img/bg_amarelo.gif);
margin: 0px;
}
#container {
width:484px;
height:100%;
margin:0px auto;
text-align:center;
padding:0px;
background-image:url(img/bg_preto.gif);
background-position: 0px 0px;
}
#fundo {
position: absolute;
background-color:#ccc;
top: 100%;
margin-top: -305px;
width:470px;
height:305px;
padding:0px;
}
#apoios {
position: absolute;
top: 100%;
left: 20px;
margin-top: -30px;
width:470px;
height:30px;
background-color:#000;
}
#content {
width:470px;
background-color:#cccccc;
}
-->
</style></head>
<body>
<div id="container">
<div id="content">text sample</div>
<div id="fundo"><img src=http://www.webdeveloper.com/forum/archive/index.php/"img/.jpg" width="470" height="300">
</div>
<div id="apoios">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"img/.gif" height="30"><img src="img/.gif" height="30">
</div>
</div>
</body>
</html>