need footer only under right column

Forum Moderators: not2easy

Message Too Old, No Replies

need footer only under right column

badams1

3:54 am on Oct 1, 2010 (gmt 0)

Developing a site and I need the footer only under the right column of a two column layout. I do not want it stuck to the bottom of the window, I need it to stick to the bottom of the content.

I've got my code so messed up now that nothing looks right. Is there a site that outlines how to do this?

Every site I come across wants the footer stuck to the bottom of the window.

Thanks

sanji41

4:44 am on Oct 1, 2010 (gmt 0)

hi! im not sure what you wanted, but footer is designed to be on the bottom of the page. but i think what you need is to put the footer code into the <div> of one of the column..and maybe you can show me the site example so i can be a more help to you. cheers!

Major_Payne

1:31 pm on Oct 1, 2010 (gmt 0)

There's options for a footer, but by definition, a footer goes on the bottom. You can either put it ANYWHERE on the bottom, centered, left, right, what have you. You can even have it scroll with the contents or have it fixed at the position you want. You can pretty much style it ANY way you want. But, we can't give you much help unless you post your CSS/HTML and let us have more details.

badams1

7:03 pm on Oct 1, 2010 (gmt 0)

Ok here is my code now that things are back right:

css


.container {
width: 782px;
margin-right: auto;
margin-left: auto;
text-align: left;


}

body{
margin: auto;
padding: 0;
font-size: 1em;
font-family: Helvetica,Arial,sans-serif;
background: #000066;

/*background-image: url(../images/fade.jpg);
background: no-repeat;*/
}

#Banner {
background-color: #000066;
height: 170px;
background-image: url(../images/header.png);
background-repeat: no-repeat;
}

#bannertext {
font-weight: bold;
color: black;
width: 200px;
font-size: 150%;
text-align: center;
padding-top: 30px;
padding-left: 20px;
font-family: Times New Roman;
}

/*#Main{ Main display area
clear: both;
height: 100%;
margin-left: 190px;
padding-bottom: 15px;
padding-left: 50px;
padding-right: 50px;
background-image: url(../images/bg.png);
background-repeat: repeat-y;

}*/

#Footer{ /*Footer display area*/
clear: both;
height: 43px;
width: 594px;
background-image: url(../images/footer2.png);
background-repeat: no-repeat;
float: right;
margin-top: -3px;

}

#MainRight {
background-image: url(../images/bg.png);
background-repeat: repeat-y;
margin-left: 190px;
}




#left {
float: left;
width: 200px;

background-image: url(../images/menubg.png);
text-align: center;
}

#left ul{
margin: 0em;
padding-left: 1.5em;
padding-top: 1em;
}
#left ul ul{
padding-top: 0em;
}
#left span.breadcrumbs {
display: block;
margin-top: 1em;
padding-left: .5em;
font-size: 90%;
font-family:arial;
}

.footertext {
text-align: center;
font-size: small;
padding-top: 15px;
}

#leftmenu {
list-style-type: none;
text-decoration: none;
font-family:arial;
font-size: 14px;
text-align:left;
color: red;
}


img {
/* Internet Explorer doesn't use bicubic interpolation by default so enable it to eliminate image jaggies*/
-ms-interpolation-mode: bicubic;
/*Allows IE7 to shrink images when browser window size is made smaller*/
max-width: 100%;
border: none;
}


/*Simple formatting for all pages*/
a {
color: black;
text-decoration: none;
}

h1 {
color:black;
text-align: center;
font-size: 180%;
text-transform: uppercase;
font-family:arial;
}

h2 {
color:black;
text-align: left;
font-size: 130%;
/*text-transform: uppercase; */
font-family:arial;
}

h3 {
color:black;
text-align: left;
font-size: 130%;
/*text-transform: uppercase; */
font-family:arial;
}

p {
color:black;
text-align: left;
font-size: 100%;
/*text-transform: uppercase; */
font-family:arial;
}

.small {
padding: 30px;
font-size: 60%;
}

html


<?php echo '<?xml version="1.0" encoding="utf-8"?' .'>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
 <jdoc:include type="head" />
<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>

<body>
<div class="container">
<div id="Banner">
<div id="bannertext">Banner Text<br />Date</div>
</div>

<div id="left"><div id="leftmenu"><jdoc:include type="modules" name="bannerlinks" />Menu</div>

<jdoc:include type="modules" name="right" />
</div>

<div id="MainRight"><!--Main display area-->Content<p>This is more content</p><p>This is even more content</p><p>Bunches more content.</p><div id="Footer"><!--Footer display area / Footer-->
<p class="footertext">2010 Copyright</p>
</div></div>
</div>
</div>
</body>
</html>

sanji41

1:48 am on Oct 2, 2010 (gmt 0)

maybe you put the footer div inside the right div..and change some code in the css to make it look right.
also, your div's are in the wrong order. wrapped them first then you can set left or right. hope this helps!

badams1

1:11 am on Oct 4, 2010 (gmt 0)

sanji, what do you mean the div's are in the wrong order? I'm using the container as a wrapper.

As for changing the code to make it look right, if I do it won't look right in the when the content in the right column is longer than the left column (already tried that).

sanji41

1:54 am on Oct 4, 2010 (gmt 0)

sorry man, must have miss it. use comments on your code so you'll never be lost on div's and keep div id's minimun. anyways, here it is.

<!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>
</head>

<style type="text/css">
body{
margin:0;
padding:0;
}
#wrapper{
width:960px;
margin:0 auto 0 auto;
padding:0px;
}
#header{
height:100px;
padding:5px;
}
#header .banner{
float:left;
}
#container{
padding:5px;
}
#container .left{
float:left;
margin:0;
width:200px;
height:100px;
}
#container .right{
margin:0;
 
height:100px;
}
#footer{
margin:0;
}
#footer .foot{
float:right;
width:200px;
}
</style>
<body>
<div id="wrapper"><!--wrapper-->
 
<div id="header"><!--start of header-->
    header
    </div><!--end of header-->
    <div id="container"><!--start of container-->
        
        <div class="left"><!--start of left-->
          left
          </div><!--end of left-->
          <div class="right"><!--start of right-->
          right
          </div><!--end of right-->
        </div><!--end of container-->
    <div id="footer"><!--start of footer-->
    <div class="foot"><!--start foot-->
      foot
      </div><!--end of foot-->
    </div><!--end of footer-->
    
</div><!--end of wrapper-->
</body>
</html>

badams1

3:30 am on Oct 5, 2010 (gmt 0)

Thanks for your help.