Positioning of Footer!!!

sumitt_2004 Peon

Messages:: 154

Likes Received:: 2

Best Answers:: 0

Trophy Points:: 0

#1

Hi,

I am using below CSS code for a site. All pages are running well but 1 page is disturb. If content of the page does not exceed <div id="content"> limit then page will run fine if it exceed then FOOTER comes in middle of content and content bgimage also hide some part of content. Can anyone please help in it!

html, body {
margin:0;
padding:0;
height:100%;
font: normal 11px/16px Verdana, Arial, Helvetica, sans-serif;
color: #313131;
text-decoration: none;
background:#fff url(../images/bg.gif) repeat-x left top;
}

h1 {
font:normal 22px/1.55em "Trebuchet MS", Arial, Verdana;
color:#A5F904;
margin:5px 0;
padding:0 0 0 10px;
background:#004973 url(../images/bg-h1.gif) no-repeat left top;
}

h2 {
font:normal 20px/1.5em "Trebuchet MS", Arial, Verdana;
color:#59A400;
margin:15px 0 0 0;
padding:0;
background:url(../images/bg-h2.gif) repeat-x left bottom;
}

p {
margin:0;
padding:0.4em 0;
}

form {
margin:0;
padding:0;
}

.queryform {
width:270px;
margin:10px 0px 10px 25px;
padding:0;
}

.queryform .qleft {
width:100px;
margin:0;
padding:0 0 0 25px;
float:left;
}

.queryform .qright {
width:100px;
padding:0;
margin:0 0 0 10px;
float:right;
}

.queryform p {
margin: 0;
padding:0;
width:135px;
clear:both;
}

.queryform .qright p {
width:94px;
padding:0;
margin:0;
}

.queryform input, textarea {/*width of text boxes. IE6 does not understand this attribute*/
font:normal 10px Verdana, Arial, Helvetica, sans-serif;
color:#333333;
}

.queryform label {
float: left;
margin-right: -20px; /*width of left column*/
width: 40px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
line-height:2.4em;
padding:0 3px 0 0;
}

.queryform input {/*width of text boxes. IE6 does not understand this attribute*/
height:15px;
width:94px;
margin-left:12px;
margin-top:0.45em;
float:left;
}

.queryform textarea{
width:94px;
height:46px;
overflow:hidden;
border:1px solid #173167;
}

.queryform .button{
width:50px;
height:15px;
border:1px solid #06780D;
background:#6ED66B;
}

input {
margin:0;
padding:0;
border:1px solid #173167;
padding:0 2px;
}

a:link, a:visited, a:active {
color:#FF6600;
text-decoration:underline;
}

a:hover {
color:#000000;
text-decoration:none;
}

img {
border:none;
}

h3 {
font:bold 14px/28px Verdana, Arial, Helvetica, sans-serif;
color:#006600;
margin:0;
clear:both;
}

h4 {
font:normal 16px/18px "Trebuchet MS", "Century Gothic", Arial;
color:#FF5A00;
margin:0;
}

h5 {
font:normal 16px/18px "Trebuchet MS", "Century Gothic", Arial;
color:#429000;
margin:0;
}

#topnav, #header, #header1, #main-body, #footer {
margin:0 auto;
width:998px;
clear:both;
}

#topnav {
top:0px;
left:0px;
position:absolute;
text-align:left;
font:bold 11px/27px Tahoma, Arial, Verdana;
color:#ffffff;
background:#004973 url(../images/bg-topnav.gif) repeat-x left top;
}

#topnav ul {
float:left;
margin:0;
padding:0;
}

#topnav li {
margin:0;
padding:5px 0 5px 0;
background:url(../images/divider-topnav.gif) repeat-y right top;
display:inline;
list-style-type:none;
}

#topnav li .focus {
color:#ffffff;
text-decoration:none;
padding:6px 20px;
background:#003C5F;
}

#topnav li a {
color:#ffffff;
text-decoration:none;
padding:7px 20px;
}

#topnav li a:hover {
color:#87FF3A;
text-decoration:none;
background:#025B8E;
}

.quote {
float:right;
margin:2px 20px 0 20px;
}

#header {
top:27px;
left:3px;
position:absolute;
height:72px;
background: url(../images/bg-header.gif) repeat-x left top;
}

#header .logo {
padding:0;
width:160px;
margin:0 10px;
float:left;
}

#header .txt {
padding:20px 100px 0 0;
width:500px;
height:52px;
margin:0 8px;
float:right;
font:normal 11px/16px Tahoma, Arial, Verdana;
color:#C6E6FF;
text-align:left;
background:url(../images/computer-head.gif) no-repeat right bottom;
}

#header1 {
top:99px;
left:3px;
position:absolute;
height:125px;
background:url(../images/bg-header1.gif) repeat-x left top;
}

#header1 .query {
padding:0;
margin:0 10px;
width:327px;
height:118px;
float:left;
background: url(../images/bg-query.gif) no-repeat left top;
font:normal 11px Tahoma, Arial, Verdana;
color:#B00000;
overflow:hidden;
}

#header1 .txt1 {
padding:20px 170px 0 0;
width:430px;
height:96px;
margin:0 8px;
float:right;
text-align:left;
background:url(../images/computer-head1.gif) no-repeat right top;
}

#main-body {
top:224px;
width:100%;
height:auto;
padding:0 0 0 0;
clear:both;
overflow:hidden;
position:absolute;
background:url(../images/bg-body.gif) repeat-x left bottom;
}

#body-container {
padding:0;
margin:0 auto;
width:998px;
clear:both;
position:relative;
}

#rightnav {
width:289px;
float:right;
height:100%;
margin:0 0 10px 0;
padding:12px;
background:#004973 url(../images/corner-rightnav.gif) no-repeat center bottom;
}

#content {
top:210px;
left:0px;
width:645px;
height:auto;
float:left;
padding:10px;
margin:0;
position:relative;
}

.list {
width:100%;
float:left;
clear:both;
}

.list ul {
margin: 0 0 10px 0px;
padding:5px;
list-style: none;
}

.list li {
font:normal 10px Verdana, Arial, Helvetica, sans-serif;
color:#000;
padding: 0px 0px 5px 10px;
margin:0;
background: url(../images/bullet1.gif) no-repeat left;
line-height: 1.6em;
background-position:0.1em 0.6em;
list-style: none;
text-transform:capitalize;
}

.list li a {
color:#666666;
text-decoration:none;
}

.list li a:hover {
color:#333333;
}

#rightnav h3 {
font:bold 11px/20px Arial, Tahoma;
text-transform:uppercase;
margin:0;
padding:0;
color:#ffffff;
}

.clearfooter {
height: 27px;
clear: both;
}

#main-footer {
clear: both;
width: 95%;
margin: 10px;
text-align: center;
background:#004973 url(../images/bg-footer.gif) repeat-x left top;
border-top:1px solid #000;
border-bottom:1px solid #000;
}

#footer {
position:relative;
overflow:hidden;
font:normal 11px/2.2em Verdana, Arial, Helvetica, sans-serif;
}

#footer .mainlink {
width:60%;
text-align:right;
float:right;
}

#footer .mainlink ul {
margin:0;
padding:0;
}

#wrapper{width:auto; margin:0 auto; padding:0px; }

#footer .mainlink li {
margin:0;
padding:5px 0;
background:url(../images/divider-footer.gif) repeat-y right top;
display:inline;
list-style-type:none;
}

#footer .mainlink li a {
color:#58A2C8;
text-decoration:none;
padding:5px 10px;
}

#footer .mainlink li a:hover {
color:#ffffff;
text-decoration:none;
}

#footer .copyright {
width:313px;
height:27px;
color:#58A2C8;
float:left;
text-align:center;
background:url(../images/bg-copr.gif) no-repeat center bottom;
}

/*orange-box starts*/
#box-orange {
background:url(../images/bg_orange.gif) repeat-x left top;
width:542px;
height:141px;
margin:0 auto;
clear:both;
padding:10px;
}

#box-orange .content1 {
width:375px;
float:left;
}

#box-orange .heading {
background:url(../images/bullet_orange.gif) no-repeat 0.1em 0.5em;
padding:0 0 0 18px;
}

#box-orange .image-orange {
padding:10px;
float:right;
}

#box-orange .txtbox-orange {
padding:5px;
float:left;
font:normal 10px Verdana, Arial, Helvetica, sans-serif;
color:#444;
}

.txtbox-orange ul {
margin:0;
padding:10px 0 0 0;
float:left;
list-style-type:none;
}

.txtbox-orange li {
margin:0;
background:url(../images/bullet_arrow.gif) no-repeat 0.1em 0.6em;
padding:0 0 0 15px;
list-style-type:none;
font:normal 10px/16px Verdana, Arial, Helvetica, sans-serif;
color:#FF5A00;
}

.txtbox-orange li a {
font:normal 10px/16px Verdana, Arial, Helvetica, sans-serif;
color:#FF5A00;
text-decoration:none;
}

.txtbox-orange li a:hover {
font:normal 10px/16px Verdana, Arial, Helvetica, sans-serif;
color:#444444;
text-decoration:none;
}

/*orange-box ends*/
/*green-box starts*/
#box-green {
background:url(../images/bg_green.gif) repeat-x left top;
width:542px;
height:141px;
margin:0 auto;
clear:both;
padding:10px;
}

#box-green .content2 {
width:375px;
float:left;
}

#box-green .heading2 {
background:url(../images/bullet_green.gif) no-repeat 0.1em 0.5em;
padding:0 0 0 18px;
}

#box-green .image-green {
padding:5px;
float:right;
}

#box-green .txtbox-green {
padding:5px;
float:left;
font:normal 10px Verdana, Arial, Helvetica, sans-serif;
color:#444;
}

.txtbox-green ul {
margin:0;
padding:10px 0 0 0;
float:left;
list-style-type:none;
}

.txtbox-green li {
margin:0;
background:url(../images/bullet_arrow.gif) no-repeat 0.1em 0.6em;
padding:0 0 0 15px;
list-style-type:none;
font:normal 10px/16px Verdana, Arial, Helvetica, sans-serif;
color:#429000;
}

.txtbox-green li a {
font:normal 10px/16px Verdana, Arial, Helvetica, sans-serif;
color:#429000;
text-decoration:none;
}

.txtbox-green li a:hover {
font:normal 10px/16px Verdana, Arial, Helvetica, sans-serif;
color:#444444;
text-decoration:none;
}

/*green-box ends*/
Click to expand...

sumitt_2004, Jun 24, 2008 IP

HDaddy Active Member

Messages:: 287

Likes Received:: 6

Best Answers:: 0

Trophy Points:: 60

#2

Do you have a live link ?

HDaddy, Jun 24, 2008 IP

sumitt_2004 Peon

Messages:: 154

Likes Received:: 2

Best Answers:: 0

Trophy Points:: 0

#3

1indianwebsolutions(dot)com/web-designing(dot)html this is the live page.

sumitt_2004, Jul 10, 2008 IP

shacow Active Member

Messages:: 339

Likes Received:: 3

Best Answers:: 0

Trophy Points:: 60

#4

have you tried

#footer {
position:fixed;
overflow:hidden;
font:normal 11px/2.2em Verdana, Arial, Helvetica, sans-serif;
}

shacow, Jul 10, 2008 IP

sumitt_2004 Peon

Messages:: 154

Likes Received:: 2

Best Answers:: 0

Trophy Points:: 0

#5

I tried but still the same result

sumitt_2004, Jul 10, 2008 IP

Log in or Sign up

Positioning of Footer!!!

sumitt_2004 Peon

HDaddy Active Member

sumitt_2004 Peon

shacow Active Member

sumitt_2004 Peon

Useful Searches