[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 596
  • Last Modified:

Absolute bottom footer

I'm trying to get the footer of this site to go to the bottom page absolutely. I've got the footer there, but I have a container that I want to get the border-bottom. Here is my code:

CSS:

html
{
height:100%;
}
body
{
background-color:#FFFFFF;
font-family:Geneva, Arial, Helvetica, sans-serif;
margin: 0 0 0 0;
height: 100%;
}
#container
{
width: 100%;
background-color: #fff;
color: #333;;
}
#content-container
{
border-bottom: #00264d thick solid;
height: 100%
}
#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
font-size: 18px;
font-family: Arial Black, Arial;
color: #00254c;
background-color: #FFFFFF;
height: 100%
}

HTML:

    <div id="container">
      <div id="top">
            <table width="100%">
              <tr>
                  <td align="left"><img src="img/header.jpg" alt="Paper Trails" /></td>
                <td align="right"><img src="img/contact.jpg" alt="Contact Us" /></td>
            </tr>
        </table>
      </div>
      <div id="content-container">
      <div id="leftnav">
        <p>
              :: <a href="#">Home</a><br/>
            :: <a href="#">About Us</a><br/>
            :: <a href="#">Services</a><br/>
              :: <a href="#">Forms</a><br/>
            :: <a href="#">Links</a><br/>
            :: <a href="#">Contact Us</a><br/>
        </p>
      </div>
      <div id="content">
     
<h2>Subheading</h2>



<div class="rbroundbox">
      <div class="rbtop"><div></div></div>
            <div class="rbcontent">
      <p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>, sed diam nonummy
        nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
        enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
        nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
        hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
        nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
        praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
        lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
        in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
        feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
        facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
       

            </div>
              <div class="rbbot"><div></div></div>
</div>
 
       

       </div>
      </div>
      <div id="footer">
      &copy; <? echo date(Y); ?> Paper Trails, Inc. <br/>
        12 Federal Street<br/>
        Brunswick, Maine 04011<br/>
        info@papertrailspayroll.com<br/>
      </div>
    </div>

Let me know if you have questions.


Thanks for all of your help.
0
cluffcakes
Asked:
cluffcakes
  • 15
  • 6
1 Solution
 
cluffcakesAuthor Commented:
forgot footer CSS:

#footer
{
color: #333;
background-color: #ddd;
border-top: #5e8435 medium solid;
text-align:center;
font-size:12px;
position: absolute;
bottom: 0;
width: 100%;
}

ALSO, the address is http://www.papertrailspayroll.com. I'd like to get the blue bottom-border in content-container to meet the footer, if possible.
0
 
mah8473Commented:
try

#content-container
{
border-bottom: #00264d thick solid;
min-height:100%
}
0
 
cluffcakesAuthor Commented:
Nope... That didn't work.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
mah8473Commented:
Can you provide the CSS for rbroundbox, rbtop, rbcontent & rbbot so I can replicate what you have?

PS: These probably won't fix your problem but I just thought I'd point them out.... I notice you have no closing </div> on rbroundbox and an extra closing </div> after your footer. Also in your CSS you have an extra ; in the container and a few more missing ; on some of the heights
0
 
mah8473Commented:
have a look at this layout is this what you are trying to achieve?
CSS

body{
font-family:Tahoma, Arial, Helvetica, sans-serif;
position:relative;
width:50em;
margin:0 auto;
border:1px solid #222;
padding:0;
}
div#branding{
position:absolute;
top:0;
left:0;
height:3.6em;
padding:.7em;
width:48.6em;
background:#004696;
z-index:2;
}
div#nav{
position:absolute;
top:5em;
left:0;
width:10.6em;
height:28.6em;
background:#006C96;
padding:.7em;
}
div#content{
position:relative;
padding:5.7em .7em .7em 12.7em;
height:28.6em;
background:#FF830F;
}
div#content_main{
height:5em;
background:#FEBD10;
padding:.7em;
}
div#content_sub{
height:5em;
background:#FFFB0F;
padding:.7em;
}
div#site_info{
clear:both;
height:3.6em;
background:#eee;
padding:.7em;
}
XHTML
<div id="branding"></div><!--branding-->
<div id="content">
        <div id="content_main"></div>
        <div id="content_sub"></div>
</div><!--content-->
<div id="nav"></div><!--nav-->
<div id="site_info"></div><!--site_info-->

have a look at this link it may help http://csskarma.com/articles/examples/clearfooter/
0
 
mah8473Commented:
the link is a sample of the above CSS & xhtml
0
 
mah8473Commented:
Sorry scratch that.... went off on a tangent...oops

your problem is the way your Divs are inheriting the height of their parent container...... so your #content-container was inheriting from #container and it had no height set (and that inherited from body)

'==========================================
here's your code corrected...well at least as best i could without all of your CSS

<%@ Language=VBScript %>
<html>
<head>
<meta NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">

<style>
body
{
height: 100%;
width:100%;
background-color:gray;
font-family:Geneva, Arial, Helvetica, sans-serif;
margin-top: 0;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;      
}
#container
{
height:100%;
width: 100%;
background-color: red;
color: #333;
}
#content-container
{
background-color: white;
border-bottom: #00264d thick solid;
color:black;
height:100%;
}

#leftnav
{
float:left;
width: 160px;
height: 100%;
margin: 0;
padding: 1em;
font-size: 18px;
font-family: Arial Black, Arial;
color: #00254c;
background-color: yellow;
z-index:1;
}

#footer
{
color: #333;
background-color: #ddd;
border-top: #5e8435 medium solid;
text-align:center;
font-size:12px;
}
</style>
</head>
<body>
<div id="container">
      <div id="top">
            <table width="100%">
              <tr>
                  <td align="left"><IMG alt="Paper Trails" src ="img/header.jpg" ></td>
                <td align="right"><IMG alt="Contact Us" src ="img/contact.jpg" ></td>
            </tr>
            </table>
      </div>
      <div id="leftnav">
              <p>
                  :: <A href="#">Home</A><br>
                  :: <A href="#">About Us</A><br>
                  :: <A href="#">Services</A><br>
                  :: <A href="#">Forms</A><br>
                  :: <A href="#">Links</A><br>
                  :: <A href="#">Contact Us</A><br>
              </p>
      </div>
      <div id="content-container">
            
            <div id="content">
            
                  <h2>Subheading</h2>

                  <div class="rbroundbox">
                        <div class="rbtop">
                        </div>
                  </div>
                  
                  <div class="rbcontent">
                              <p>Lorem ipsum dolor sit amet, <A href="#">consectetuer adipiscing elit</A>, sed diam nonummy
                                nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
                                enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
                                nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
                                hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
                                nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
                                praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
                                <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
                                lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
                                in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
                                feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
                                blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
                                facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
                                nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                                <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
                                lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
                                in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
                                feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
                                blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
                                facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
                                nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                  </div>
                  <div class="rbbot">
                  </div>
            </div>
            
      </div>
      <DIV id=footer>© <? echo date(Y); ?>Paper Trails, Inc. <BR>12 Federal Street<BR>Brunswick, Maine 04011<BR>info@papertrailspayroll.com<BR>
            </DIV>

</div>
</body>
</html>

0
 
mah8473Commented:
I changed the back-colours so I could see them better so you'll need to correct that...hope this helps
0
 
mah8473Commented:
Just checking to see if that fixed your problem?
0
 
cluffcakesAuthor Commented:
No, but thanks for your help. Sorry I've been away for so long.

If you look at http://www.papertrailspayroll.com, I want to get the footer to always be at the bottom of the page, whether the screen resolution is 800x600 or 1280x1024. Even if there is no content, I'd like the footer to still be at the bottom of the page with the #content-container stretching to the bottom to move the borders to align with the footer. And, if there is content, I want to make sure the footer is below the content. Essentially, I want the layout to fill up the whole screen in any screen resolution. Maybe this isn't possible, but I thought it was... Let me know if this makes sense.

Thanks

0
 
mah8473Commented:
Ok so what exactly is it doing?

Here's a screenshot of my reworked version of your CSS & HTML exactly as pasted above and I am getting the exact effect you are describing as your desired outcome
https://filedb.experts-exchange.com/incoming/ee-stuff/5173-Screenshot.zip 

Copy my code into a blank page and have a look. I would hope you'de get exacly the same effect as in the screenshot attached above....the content-container can have nothing in it and the bottomborder will still be aligned with the top of the footer.....can you describe your problem based on my sample?
 
0
 
mah8473Commented:
oh yeah and can you give me the CSS for rbroundbox, rbtop, rbcontent & rbbot so I can replicate exactly what you have?
0
 
cluffcakesAuthor Commented:
.rbroundbox { background: url(img/nt.gif) repeat; }
.rbtop div { background: url(img/tl.gif) no-repeat top left; }
.rbtop { background: url(img/tr.gif) no-repeat top right; }
.rbbot div { background: url(img/bl.gif) no-repeat bottom left; }
.rbbot { background: url(img/br.gif) no-repeat bottom right; }

.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 4px;
font-size: 1px;
}
.rbcontent { margin: 8px 8px 8px 8px; }
.rbroundbox { width: 98%; margin: 1em auto; }

I'll work with what you've got and see if I can completely replicate your effect.

Thanks for all your help
0
 
cluffcakesAuthor Commented:
i copied your code exactly, and I cant get it to work in Firefox. I'm going to try in IE in just a minute (I'm on a Mac and have to use someone else's PC to check IE). Updated source is at papertrailspayroll.com if you want to take a look.

Thanks again for all of your help.
0
 
mah8473Commented:
hmmm the round box won't do much for me without the images but no matter

Ahhhh Firefox....hangon let me dig through so code and find a fiefox, opera, safari fix for page heigh and widths...gimme 5
0
 
mah8473Commented:
whack this in you <head>...it should fix the firefox issues....he says with his fingers crossed ;)

<style>
html,body {height:100%}
#outer {height:100%; min-height:100%;/*for mozilla*/}
html>body #outer {height:auto}/*for mozilla */
</style>
0
 
mah8473Commented:
OK I downloaded Mozilla Firefox and it still gives me the desired ....with or without that mozilla fix?

....it screwed with the Menu a little bit and misaligned some of my text, but the bottom of the Content-container is still Flush across the bootom with the top of the footer ??
0
 
mah8473Commented:
* had a look at your site in IE and it is SPOT ON :)
* had a look at you site in Firefox and it bunches the footer up to the length of the content-container and
  floats your image over both Divs ...eeeeuuuw I can see what you mean

I'll try to find some time to play with my version in firefox today but I'm kinda busy right now....I'll be back tho...I don't being beaten by something like this.
0
 
mah8473Commented:
Sorry haven't had a chance to look at this again...I've been flatout....

I just realised you also have a DIV class called Top where you display your header images....can you give me the CSS for that too please....actually you could just give me the entire CSS and I can pick out the bits I want if you like?

Have you got any closer to a solution yourself?

0
 
cluffcakesAuthor Commented:
I've gone in a different direction with this website, mah8473. Thanks for your help with this, however. I really appreciate all of your support through my struggles with CSS!

Thanks,
Chris
0
 
mah8473Commented:
No problem anytime...

Had a look at your site again and although we nearly got there  I think I like that layout better anyway :)

0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 15
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now