Forum Moderators: not2easy
My problem is the footer. I don't know how to put it right under the two columns but inside the browser window, so that you don't have to scroll down to see it. I don't know how to explain it en english, but here is an image that may help: <No site specifics, thanks. See TOS #13 [WebmasterWorld.com]>
Any ideas?
THanks a lot
Fede
[edited by: SuzyUK at 11:05 pm (utc) on Mar. 20, 2005]
Welcome to the forum!
I don't know if you're aware of this, but you're attempting a very advanced design.
You may be able to get the footer attached to the bottom of the screen with css rules like this:
#footer {
display: fixed;
width: 80%;
height: 10%;
bottom: 0;
left: 10%;
margin: 0 auto; /*to center the div*/
}#main {
width: 80%;
height: 10%;
margin: 0 auto; /*to center the div*/
}
As you can see in my example you will probably need to do it with percentages to get the footer and main parts to match up and to make the design flexible in size (to respond well to different window sizes).
I'm not sure that height works well with every browser, so you should be sure to test well.
I have never tried to do this solution, but I suspect it will be difficult.
Have you seen a site you like? If so, take a look at their code to see how they did it.
But recently, a friend of mine did this (http://c.1asphost.com/quinientosonce/siempre-cien/index2.html) and it seems perfect :D
Thanks for answering ;)
Fede
Yes, it works very nicely in IE, but it doesn't work in all browsers. I'd bet that it's the height rule, primarily. Take a look at it in Firefox, where the height of the "flotantes" divs is tall enough to fit the content, but not to fit the page.
A proposito, your link is going to be removed, because the forum rules ask us to post the code instead of a link. I'll paste it here:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title></title>
<style type="text/css">
<!--
html,body {_height:100%;min-height:100%;margin:0px;padding:0px;}
#container {width:600px;margin:auto;_height:100%;min-height:100%;position:relative;background:url(fondo.gif) center center;margin-bottom:-100px;}
#header {background:#FFFF00;height:50px;position:absolute;top:0;left:0;width:100%;}
#flotantes {}
#left {width:300px;float:left;margin-top:50px;padding-bottom:50px;}
#right {width:300px;float:right;margin-top:50px;padding-bottom:50px;}
#clear {clear:both;height:1px;}
#footer {background:#FF00FF;height:50px;clear:both;position:absolute;bottom:0px;left:0px;width:100%;}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">Este bloque tiene alto y ancho fijo</div>
<div id="flotantes">
<div id="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean sed neque ut leo lacinia interdum. Ut ac tortor et ligula
rutrum ultricies. Proin auctor gravida pede. Aenean quis ligula
nec ligula ultrices vestibulum. Nam eu diam. Duis urna lorem,
scelerisque ac, aliquet a, varius vitae, nisl. Aliquam
ullamcorper turpis non pede.</div>
<div id="right">Lorem Ipsum dolor sit amet</div>
<div id="clear"></div>
</div>
<div id="footer">Este bloque tiene alto y ancho fijo</div>
</div>
</body>
</html>
I'm still with display:table + javascript.
Thanks
Fede
Of course, that will work only if users have JS turned on. I try to minimize use of JS with my commercial sites, but this site may not matter.
I provide a default in the event that JS is turned off, using <noscript>.
