|
CSS - Sticky Footer Hiding Main Content Background
Hello,
I just joined the forum, I'm new to web design although I have some experience in video post production. I'm attempting to create a layout for a website using sticky footer technique and an image for the border shadow in the main column. The sticky footer works well until I tweak the css to add the background border image, then I get this empty space in the middle of the body where the border image background should be extending to. It's probably a novice mistake but I can't get to find it. Your help would be much appreciated. The HTML: Code: <body>
<div id="nonFooter">
<div id="wrapShadow">
<div id="header">
<div id="linksHead"></div>
<div id="mainMenu"></div>
</div>
<div id="content">
<div id="bannerSlider"> (SWF file)
</div>
<div id="contentBuscador">
</div>
<div id="contentTours">
</div>
<div id="contentElite">
</div>
<div id="contentTestimonios">
</div>
<div id="contentPromos">
</div>
</div>
</div>
</div>
<div id="footer">
<div id="wrapShadowFooter">
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
The CSS: Code: html,body {
padding: 0;
margin: 0;
}
html
{
height: 100%;
}
body
{
height: 100%;
background-color: #3399cc;
}
#nonFooter
{
position: relative;
min-height: 100%;
background-image: url(_images/shadow920x1ver3.gif);
width: 920px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
* html #nonFooter
{
height: 100%;
}
#content
{
padding-bottom: 7em;
width: 900px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
clear: both;
border-top-width: medium;
border-top-style: solid;
border-top-color: #336;
}
#header {
width: 900px;
height: 100px;
position: relative;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
}
#footer
{
position: relative;
margin-top: -6em;
height: auto;
background-image: url(_images/shadow920x1ver3.gif);
width: 920px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#wrapShadow {
width: 920px;
margin: 0px;
padding: 0px;
height: auto;
}
#wrapShadowFooter {
width: 900px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
padding: 0px;
background-image: url(_images/footerCruiseship.jpg);
background-repeat: no-repeat;
float: left;
height: 100px;
}
All #content(area) Divs in content have the same code as this:
#contentBuscador {
float: left;
height: 100px;
width: 880px;
padding: 0px;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}
Thank you, pixelMason. Edit: Problem Solved thanks to f_nietzsche Similar TutorialsHi, Wondering if anyone can help with a sticky footer im trying to achieve. Im currently working on retentionbs.com, and noticed the footer doesnt stick to the bottom of the window. I've searched it and the solutions seem fairly complex. Does anyone have a quick fix? Any help would be massively appreciated! Thanks, Graeme Hello! I am new to dreamweaver CS3 and need help with these two things: when I preview my site in IE my lightbox does not work. And my sticky footer does not stick to the bottom of the page. Please someone help me. Thank you in advance! Hi I was hoping someone could help me with a sticky footer layout. What I've got so far kind of works, but not quite perfectly. Basically, I want the top & bottom of the container div to always be 20px from the edge, and for the footer to stick to the bottom of the container. I've kind of got it working, but because of the padding on the body there's always a scrollbar present, plus with some browsers, the footer only seems to stick when resizing the window from the corner. Here's the code: 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>
<title></title>
<style type="text/css">
html {
height:100%;
}
body {
padding:20px 0 20px 0;
background:#d9e7ea;
margin:0px auto;
font-size:11px;
font-family:"Trebuchet MS", Verdana, Helvetica, sans-serif;
color:#000;
height:100%;
}
#wrap {
margin:0 auto;
position:relative;
width: 950px;
min-height:100%;
background-color:Red;
overflow:hidden;
}
#header {
margin:0 20px;
height:100px;
background-color:Green;
}
#content {
margin:0 20px;
padding-bottom:50px;
background-color:#ffffff;
background-color:Blue;
}
#footer {
color:#000;
position:absolute;
bottom:0px;
background-color:Yellow;
height:50px;
width:950px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
header
</div>
<div id="content">
content<br />
content<br />
content<br />
content<br />
content<br />
content<br />
content<br />
</div>
<div id="footer">
footer<br />
</div>
</div>
</body>
</html>
Thanks for any help. Just practicing but can anyone tell me why my footer doesn't stick to the bottom of the page? Also why does my page scroll sideways when I include my table? http://csstest.dmsbdesign.com/templates/templates%201/ css here Code: @charset "utf-8";
/* CSS Document */
body{
margin:0px;
background-color:#F7F7F7;
height:100%;
}
.quicklink{
padding-bottom:10px;
padding-top:10px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000000;
list-style-type:none;
width:220px;
text-align:left;
padding-left:5px;
}
#container{
background-color:#E1E1E1;
width:1000px;
margin-left:auto;
margin-right:auto;
padding-bottom:100px;
}
#header{
background-color:#666666;
width:1000px;
height:100px;
margin-left:auto;
margin-right:auto;
}
#logo ul{
margin:0px;
position:relative;
left:-15px;
bottom:60px;
}
#logo li{
text-align:right;
list-style-image: none;
list-style-type: none;
}
#logo{
position:relative;
left:5px;
top:10px;
}
#logo img{
height:75px;
width:75px;
}
#logo h1{
position:absolute;
margin:0px;
left:75px;
top:15px;
}
#logo h2{
position:absolute;
margin:0px;
left:75px;
top:45px;
}
#nav{
background-color:#999999;
width:1000px;
height:25px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#nav ul{
margin-top:0px;
}
#nav li{
display:inline;
list-style-type:none;
padding-right:80px;
}
#pictureDiv{
margin-top:10px;
width:940px;
height:240px;
margin-left:auto;
margin-right:auto;
background-color:#CCCCCC;
padding: 5px;
border:1px #000000 solid;
}
#contentDiv tr {
}
#pictureDiv h1{
position:relative;
margin:0px;
width:200px;
font-size:24px;
left:735px;
top:-150px;
color:#ff0000;
}
#pictureDiv img{
position:relative;
left:10px;
}
#contentDiv{
margin-top:10px;
width:900px;
height:325px;
margin-left:auto;
margin-right:auto;
}
#contentDiv table{
position:relative;
top:-510px;
left:550px;
width:375px;
}
#contentDiv tr{
}
#contentDiv td {
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000000;
padding-bottom:10px;
padding-top:10px;
}
#contentDiv p{
width:75%;
margin-left:5px;
margin-right:5px;
margin-bottom:5px;
}
#contentDiv h1{
margin:5px;
}
#footer{
position:relative;
z-index:-1;
margin-top:-50px;
background-color:#666666;
width:100%;
height:100px;
margin-left:auto;
margin-right:auto;
}
html here 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>My Page</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="../../images/Placeholder.png" />
<h1> My Webpage </h1>
<h2> My Slogan </h2>
<ul>
<li> Phone Number: 555-555-5555 </li>
<li> Address: 123 Main St </li>
</ul>
</div>
</div>
<div id="nav">
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
<li>Nav 4</li>
<li>Nav 5</li>
<li>Nav 6</li>
<li>Nav 7</li>
</ul>
</div>
<div id="pictureDiv">
<img src="../../images/png/Placeholderstreched.png" />
<h1>Maecenas sollicitudin ultricies neque ut condimentum. Cras id dui dui?</h1>
</div>
<div id="contentDiv">
<h1>Nam vitae lorem!</h1>
<p style="width:500px;">Praesent molestie orci semper lectus aliquet ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ut diam faucibus magna tempus viverra quis id lorem. Quisque ac pulvinar erat. Nullam pretium, ipsum non cursus facilisis; arcu massa viverra quam, sit amet venenatis arcu elit sit amet arcu. <br /> <br />Proin tempus blandit ante non ultrices. Fusce posuere adipiscing metus, a dapibus risus tristique a! Integer faucibus urna commodo metus suscipit sollicitudin. Duis gravida gravida rhoncus. Sed eget felis in risus euismod imperdiet. Proin quis libero quis purus tincidunt facilisis at non massa. Integer auctor aliquam lorem eget sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<ul style="position:relative; right:20px;">
<li>Suspendisse sagittis leo leo. Lorem.</li>
<li>Suspendisse elit velit, scelerisque ut.</li>
<li>Nullam nec magna risus, adipiscing.</li>
<li>Etiam luctus ullamcorper libero ac.</li>
<li>Aenean pretium orci mollis orci.</li>
</ul>
<ul style="position:relative; top:-116px; left:250px;">
<li>In quis arcu justo, sed.</li>
<li>Nullam elementum varius.</li>
<li>Nulla egestas vehicula erat.</li>
<li>Nam congue rhoncus gravida.</li>
<li>Pellentesque habitant morbi tristique.</li>
</ul>
<table width="290" border="0" cellspacing="0">
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="middle"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />
Aliquam ac odio sit amet ligula ornare.</td>
</tr>
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="top"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />Aliquam ac odio sit amet ligula ornare.</td>
</tr>
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="top"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />Aliquam ac odio sit amet ligula ornare.</td>
</tr>
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="top"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />Aliquam ac odio sit amet ligula ornare.</td>
</tr>
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="top"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />Aliquam ac odio sit amet ligula ornare.</td>
</tr>
</table>
</div>
</div>
<div id="footer">content for id "footer" goes here</div>
</body>
</html>
Hi all, I have a page with a sticky footer. It's all working great thanks to the sticky bottom tutorial from Ryan Fait. I already contact him but his wrists are broken so he can't do anything. This is the website we're talking about: - www .rokjesdagloop .nl And here is the deal: - As you can see the footer stays at bottom so I insert the sticky bottom tutorial wich lead us to this: www .rokjesdagloop .nl /test .php But I want the footer a little bit inside the content so the text overlaps the girl a bit on the background. I tried several things on the margin's and the heights but still nothing that works. Does anybody have tips or codes? Would be great! Thank you in advanced! Regards, Jonathan Currently, my main content div has a repeated-y background. However, when my text doesn't span the entire window, it cuts off. Instead, I'd like it to stretch all the way down to my sticky footer. I'm no expert at CSS, and I'm stumped. I've searched all over and tried all sorts of fixes, but I just can't see the problem. Help? Thanks! URL CSS: Code: * { margin:0; padding:0; } html, body, #wrap { height: 100%; min-height:100%; /* thanks to http://blog.fakedarren.com/2010/01/cross-browser-css-gradients/ */ /* and http://www.puremango.co.uk/2010/04/css-gradient/ */ /* fallback (Opera) */ background: #8cb6e9; /* Mozilla: */ background: -moz-linear-gradient(top, #8cb6e9, #e0effc); /* Chrome, Safari:*/ background: -webkit-gradient(linear, left top, left bottom, from(#8cb6e9), to(#e0effc)); /* MSIE */ filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#8cb6e9', EndColorStr='#e0effc', GradientType=0); } body > #wrap {height: auto; min-height: 100%;} #main { padding-bottom: 116px; height:100%; } /* must be same height as the footer */ #contentwrapper { margin: 0 auto; height:100%; min-height:100%; } #content { background-image:url(containerbg.jpg); background-repeat:repeat-y; margin: 0 auto; width:1000px; height:100%; min-height:100%; } #footer { position: relative; margin-top: -116px; /* negative value of footer height */ height: 116px; background-image:url(layout/footer.png); width:100%; background-position:center; clear:both; } /* CLEAR FIX*/ .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */
HTML: Code: <body> <div id="wrap"> <div id="main" class="clearfix"> </div> <div id="contentwrapper"> <div id="content"> <p>Your website content here.</p> </div> </div> </div> </div> <div id="footer"></div> </body> Please take a look at this page in IE 6.0: http://ist4pos.com/pos_solutions/gemini.html The sticky footer does one of three things. It either sticks properly, it cuts the page off at the fold, or it sticks to the bottom of the page but with several inches of white space underneath. If you refresh the page if will change from one to another. If you click around the site, other pages do this as well, so long as they are long enough to push the page past the fold. IE7 usually works but sometimes the footer hovers in the middle of the page. I can't understand why the same browser on the same computer can render the same page completely differently several times in a matter of seconds. Here is my CSS. All the relevant stuff is right at the top: Code: html, body, #outerDiv {height: 100%;}
body > #outerDiv {
min-height: 100%;
}
#main {padding-bottom: 35px;} /* must be same height as the footer */
#footer p {
font-family: Verdana, Geneva, sans-serif;
font-size: .75em;
color: #FFF;
text-align: center;
padding-top: 10px;
}
#footer {
position: relative;
margin-top: -35px; /* negative value of footer height */
height: 35px;
clear:both;
background-color: #CCC;
}
/* ===== global styles ===== */
h1, h2, h3, h4, h5, h6, p, {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background-image: url(images/backGrad2.jpg);
background-repeat: repeat-x;
text-align:center;
}
#outerDiv #threeColumns #middleColumn ul li ul {
font-size: 16px;
}
p {
font-family: Verdana, Geneva, sans-serif;
font-size: 0.7em;
color: #666;
margin: 0px 0px 10px;
padding: 0px;
list-style-type: square;
line-height: 1.6em;
text-align: left;
}
h1 {
font-family:Cambria, Verdana, Geneva, sans-serif;
font-size:1.4em;
color: #0067AC;
text-align: left;
line-height: normal;
font-weight: normal;
margin-bottom: 2px;
margin-top: 5px;
}
h2 {
font-family: Verdana, Geneva, sans-serif;
font-size: 0.8em;
color: #666;
text-align: left;
line-height: 1.5em;
font-style: normal;
text-transform: uppercase;
font-variant: normal;
margin-bottom: 10px;
font-weight: normal;
margin-top: 0px;
}
h3 {
font-family: Verdana, Geneva, sans-serif;
font-size: 0.7em;
color: #666;
font-weight: normal;
margin-bottom: 7px;
font-style: italic;
}
h4 {
margin-bottom: 10px;
font-weight: normal;
}
/* ===== header ===== */
div#header {
height: 110px;
width: 900px;
position: relative;
background-repeat:no-repeat;
}
div#headerLinks {
float:right;
padding-top: 20px;
}
#header #headerLinks p {
font-family: Verdana, Geneva, sans-serif;
font-size: 12pt;
color: #666;
}
/* ====== image placeholders ===== */
div#navPlace {
width: 900px;
height: 35px;
background-color: #808285;
}
div#topDivider {
width: 900px;
height: 35px;
padding: 11px 0px 3px 0px;
}
div#centralPlace {
height: 135px;
width: 900px;
padding-top: 10px;
}
/* Assorted Page SubDivs */
div#leader1 {
float: left;
width: 220px;
}
div#leader2 {
float: left;
width: 220px;
padding-left: 10px;
}
div#sitemapOne {
float: left;
width: 210px;
}
/* ====== three columns ===== */
div#threeColumns {
margin-top:15px;
}
div#outerDiv {
width: 900px;
margin: 0 auto;
text-align:left;
height: auto !important;
height: 100%;
}
div#leftColumn {
position: relative;
width: 185px;
float:left;
}
div#middleColumn {
width: 480px;
float:left;
text-align: justify;
background-color: #FFF;
padding: 15px 15px;
}
div#rightColumn {
width: 191px;
position:relative;
float:right;
text-align: center;
background-color: #FFF;
padding: 0px;
margin-bottom: 40px;
}
/* ====== partner logo ===== */
div#partner {
margin: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 35px;
padding-left: 0;
}
#outerDiv #threeColumns #rightColumn #partner img {
}
/* ====== blog/contact button ===== */
div#blog {
padding: 0;
float: right;
width:176px;
margin: 15px 7px 15px 0px;
}
div#contact{
margin: 15px 4px 15px 0;
padding: 0;
float: right;
width:176px;
}
/* ====== social media links ===== */
div#social {
position: relative;
padding-top: 20px;
padding-right: 32px;
padding-bottom: 20px;
padding-left: 0px;
}
#social p {
vertical-align: bottom;
}
#social img {
float: right;
padding-left: 3px;
}
/* ====== float classes ===== */
.fltrt {
float: right;
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
}
.fltleft {
float: left;
margin-top: 10px;
margin-right: 10px;
}
/* ====== Links ===== */
a.graphic:link {
color: #666;
text-decoration: none;
height: 20px;
width: 150px;
background-color: #EEE;
margin-bottom: 2px;
padding: 12px 10px 10px 5px;
display: block;
border-width: 1px 1px 1px 5px;
border-style: solid;
border-color: #0067AC;
}
a.graphic:visited {
color: #333;
text-decoration: underline;
}
a.graphic:hover {
color: #0067AC;
}
a.graphic:active {
color: #0067AC;
}
a.product:link {
color: #999;
text-decoration: none;
margin-bottom: 3px;
padding-bottom: 3px;
background-image: url(images/link_background.jpg);
background-repeat: no-repeat;
background-position: left top;
padding-left: 10px;
margin-top: 3px;
padding-top: 3px;
}
a.product:visited {
color: #999;
text-decoration: none;
background-image: url(images/link_background.jpg);
background-repeat: no-repeat;
background-position: left top;
margin-top: 3px;
margin-bottom: 3px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 10px;
}
a.product:hover {
color: #0067AC;
}
a.product:active {
color: #0067AC;
}
a.trad:link {
color: #0067AC;
text-decoration: underline;
text-align: left;
margin: 0px 0px 10px;
padding: 0px 0px 10px;
font: 11px Verdana, Geneva, sans-serif;
}
a.trad:visited {
color: #999;
text-align: left;
margin: 0px;
padding: 0px;
font: 11px Verdana, Geneva, sans-serif;
}
a.trad:hover {
color: #0067AC;
text-decoration: none;
font: 11px Verdana, Geneva, sans-serif;
}
a.trad:active {
color: #0067AC;
text-decoration: none;
font: 11px Verdana, Geneva, sans-serif;
}
a.footer:link {
color:#FFF;
text-decoration: none;
}
a.footer:visited {
color:#FFF;
text-decoration: none;
}
a.footer:hover {
color:#FFF;
text-decoration: underline;
}
a.footer:active {
color:#FFF;
text-decoration: underline;
}
#outerDiv #threeColumns #rightColumn #partner img {
margin-top: 15px;
}
div#download {
margin: 15px 4px 15px 0;
padding: 0;
float: right;
width:176px;
}
#outerDiv #threeColumns #middleColumn ul li {
font-family: Verdana, Geneva, sans-serif;
font-style: normal;
font-weight: normal;
color: #666;
line-height: 1.6em;
padding-top: 0px;
padding-bottom: 4pt;
font-size: .7em;
}
.tablewhiteheads {
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
font-size: .7em;
font-weight: bold;
padding-left: 5px;
}
#outerDiv #threeColumns #middleColumn table tr td p {
margin: 2px;
}
div#contactColumn {
width: 524px;
float:left;
text-align: justify;
margin-bottom: 40px;
background-color: #FFF;
padding: 15px;
}
div#missionColumn {
width: 480px;
float:left;
text-align: center;
margin-bottom: 40px;
background-color: #FFF;
padding: 15px;
}
#outerDiv #threeColumns #missionColumn p {
font: 16px Cambria, Georgia, "Times New Roman", Times, serif;
text-align: center;
margin-bottom: 10px;
}
#outerDiv #threeColumns #missionColumn h1 {
text-align: center;
margin-bottom: 10px;
}
#outerDiv #threeColumns #missionColumn p img {
margin-top: 5px;
margin-bottom: 5px;
}
div#siteMapColumn {
width: 660px;
float:left;
text-align: justify;
margin-bottom: 40px;
background-color: #FFF;
padding: 15px;
}
I use an SSI for the footer text, but I've tried removing this and it doesn't seem to make a difference. Does anyone have any idea what's going on here? I just don't understand how it can behave so inconsistently in a singular environment. Thanks! Tim Hello Guys, I'm hoping someone might be able to help me here. I have been developing a site for a friend who is starting his own company. I'm a self taught web designer and I'm relatively fresh when it comes to CSS, but I thought I'd give it a shot. I decided to use a sticky footer as I think it makes for a cool look. Everything is working wonderfully in Firefox, but when I test in other browsers I have issues. 1) Safari & IE7 Strange things are happening with the main content not fully displaying The footer isn't "pushed" down by the main site contents and covers up some of the content. Safari is even weirder because it works sometimes when I move around the size of the window itself, making it thinner (my screen is fairly wide). 2) IE 7 My right hand floated div (#contentright) appears in the wrong place. This doesn't happen in Firefox or Safari and I have no idea why. As far as I can tell it should be within the wrapper, to the right of the left content. This is on the sub-pages - there is no right side on the home page. If anyone can help out with these issues I would be grateful. Site is at: <removed at users request> CSS is at: <removed at users request> Code is more or less W3C valid as is CSS, bar a few minor issues which shouldn't be relative to the above. Many thanks, Jo First, I should share this fantastic piece of code for sticky footers (footer stays at the bottom even when content is short): http://scott.sauyet.com/CSS/Demo/FooterDemo1.html It works great for a liquid layout in FF and IE6. However, for fixed width layout, the container is left justified instead of centering the container. See: http://shawkey.com/stickyfooter/fixedlayoutstickyfooter.html Anyone want to hack at this with Firebug and see if they can get the container to be centered? Thanks! I've dabbled with the display: table properties for awhile, and I've looked forward to the time I could use them at work. Equal height columns! No more faking it with extra wrapper div's and background images! As we're finally rolling out IE8 at work, I decided to take a pretty typical layout that I would have laid out years ago in a table. Header, footer, nav and content, that is always at least the height of the page and will expand with more content: http://www.richarddoyle.net/tests/css_table/table.html This could be done using floats, background images, etc, but I wanted to take advantage of what display: table could offer me. So I tried to recreate the same layout. I knew there was no colspan in CSS, but I was sure I could get it to work somehow. My first attempt showed the colspan issue: http://www.richarddoyle.net/tests/css_table/cssversion1.html My second attempt I couldn't get the page to match at least the height of the browser: http://www.richarddoyle.net/tests/css_table/cssversion2.html Is this just impossible to do with display:table properties? Is there some mixture of table properties and sticky footer code that can make this work? I am working on this layout. I have a header contained in an ap div that stretches the whole screen, A body with 2 sections, the upper portion scales all the way across, and the lower portion is centered in the middle, and I need to add a sticky footer that stretches across the whole page on the bottom. I can't figure it out and have tried a few options but none seem to work. Does anyone have any ideas on how to accomplish this. I know I can absolute position a footer at the bottom but I do not want a floating bar running across the screen incase someone with a super high resolution one day decides to view the page. Here is my code. If anyone can help I'd really appreciate it. <!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> <style type="text/css"> <!-- #headerDiv { position:absolute; left:0px; top:0px; width:100%; height:219px; z-index:1; background-image:url(images/header_bg.jpg) } #leftcontentDiv { position:absolute; left:0px; top:0px; width:50%; height:219px; z-index:2; } #headermenuDiv { position:absolute; width:263px; height:19px; z-index:2; margin-top:5px; margin-left: 10px; font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #FFF; left: 26px; } #rightcontentDiv { position:absolute; right:0px; top:0px; width:50%; height:219px; z-index:2; } #logoDiv { position:absolute; left:0px; top:0px; width:511px; height:101px; z-index:2; background-image:url(images/ogo.jpg) } #searchDiv { position:absolute; left:90px; bottom:0px; width:330px; height:42px; z-index:2; background-image: url(images/search.jpg); } #logosearch_containerDiv { position:absolute; left:1%; top:25px; width:511px; height:146px; z-index:2; } #signupDiv { position:absolute; width:212px; height:19px; z-index:2; margin-top:5px; right:5px; font-size:12px; font-family: Arial, Helvetica, sans-serif; color: #FFF; } #loginDiv { position:absolute; right:0px; top:24px; width:233px; height:119px; z-index:2; background-image:url(images/login.jpg) } #bodytopDiv { position:absolute; left:0px; top:219px; width:100%; height:401px; z-index:2; } #photoDiv { position:absolute; left:0px; top:0px; width:589px; height:349px; z-index:3; } #titlecontainerDiv { position:absolute; right:2px; top:0px; width:50%; height:349px; z-index:3; text-align: left; } body { text-align: center; } #bodytopbottomDiv { position:absolute; left:0px; top:348px; width:100%; height:51px; z-index:3; background-color: #0361C1; } #bodytopDiv #bodytopbottomDiv table { text-align: center; font-family: Arial, Helvetica, sans-serif; color: #FFF; font-size: 12px; } #newalbumsDiv { position:absolute; left:0px; top:620px; width:301px; height:301px; background-image: url(images/newalbums.jpg); } #topalbumsDiv { position:absolute; left:318px; top:620px; width:301px; height:301px; background-image: url(images/topalbums.jpg); } #videosDiv { position:absolute; left:636px; top:620px; width:386px; height:301px; background-image: url(images/videos.jpg); } #lowerbodycontainer { width: 1024px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; left: 0px; top: 0px; } --> </style> </head> <body> <div id="headerDiv"> <div id="leftcontentDiv"> <div id="headermenuDiv">Home | About us | FAQ | Help | Reach us here</div> <div id="logosearch_containerDiv"> <div id="logoDiv"></div> <div id="searchDiv"></div> </div> </div> <div id="rightcontentDiv"> <div id="signupDiv">New User? Signup | New Artist? Sign up</div> <div id="loginDiv"></div> </div> </div> <div id="bodytopDiv"> <div id="photoDiv"><img src="images/girlcap.jpg" width="589" height="349" /></div> <div id="titlecontainerDiv"><img src="images/logo.png" width="519" height="118" /></div> <div id="bodytopbottomDiv"> <table width="777" border="0" align="center" cellspacing="10"> <tr> <td width="145">text goes here</td> <td width="150">text goes here</td> <td width="126">text goes here</td> <td width="161">text goes here</td> <td width="125">text goes here</td> </tr> </table> </div> </div> <div id="lowerbodycontainer"> <div id="newalbumsDiv"></div> <div id="topalbumsDiv"></div> <div id="videosDiv"></div> </div> </body> </html> In a basic CSS single column layout with Header, Content, Footer div structure, where the page background image is defined in the Body CSS, is there a way to specify that below the Footer div, the page background does not show? http://cheers-sendai.com/fluidframe.htm has a great and simple example of 3 cols (OK, 2 cols in the middle section makes "4 cols"), header and sticky footer, where the middle col has overflow:auto so it can be scrolled. GREAT example, I think (due to the use of bg colors, etc.). The left/right/width values of the divs are manipulated so that the middle section runs from 10% to 90% and the left/right divs fill in accordingly. I'd like to be able to set, for example, the left and right divs to be 150 px wide (NO percentages!) and have the middle section stretch between them (regardless of viewport width) and be able to be scrolled, too. The problem I see is that most examples use percentages. I can set the left div to be a fixed width, then set the middle section left coord. to be, say, 150px, but then I need to set its width to stretch to "150 to the left of the right side of the viewport" and I don't know how to do this. Thanks. I have tried multiple times to have a kind of "content" div, where it resizes vertically to the amount of content in it, and stays the same width and is centered. How can I do this? I know min-height doesn't work in IE. Another problem I was having, certain pages would be off to the left when they should have been centered. Please help! I've been trying for days to get this to work and nothing i do makes this stupid page extend with the content that i put in. If anyone has any idea's as to why and could point me in the right direction i would very much appreciate it. The link to the site is below, thank you in advance. hxxp://adrian.briansykes.netau.net/ So far my site appears somewhat like this Header Menu Main Content Footer Now what I wish to do for the Main Content, is create boxes, 2 top boxes and 2 lower boxes: Box 1 Box 2 Box 3 Box 4 So I've been playing around, trying to get them to float, ya de da, I can manage to get 2 columns, but when I attempt to put in the 2 lower columns, the footer ghosts over top of all the main content and all you can see is the header, menu and footer. If attempted to wrap them in container's but have failed miserably, any help would be appreciated. |
|||||||