Hi there,

 

i am having a problem with a page on my website www.organicgrowshop.co.uk/shipping.html

 

The footer image floats to the right instead of being centred. I think it must be a CSS issue but don't know what rule is causing this to happen, here is the CSS it is using:

 

 

@charset "UTF-8";

ul {
list-style-type:none;
}
body {
margin: 0;
padding: 0;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
line-height: 1.4;
background-color: #FFF;
background-repeat: no-repeat;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
a img { 
border: none;
}
h1, h2, h3, h4, h5, h6, p {
padding-right: 0px;
padding-left: 0px;
background-color: #FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 0px;
}
a:link {
text-decoration: none;
color: #000;
}
a:visited {
color: #000;
}
.container {
width: 960px; 
background-color: #FFF;
border-top-color: #030;
position: relative;
padding: 0px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

}
.green85cb00 {
color: #85cb00;
}
.blue76b1b2 {
color: #76b1b2;
}
.purple768bc3 {
color: #768bc3;
}

.header {
font-size: 36px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
background-color: #FFF;
}
.container .content h1 {
font-family: verdana, Arial, Helvetica, sans-serif;
font-weight: bolder;
}
#supplies {
background-color: #b3a179;
background-repeat: repeat-y;
font-family: Verdana, Geneva, sans-serif;
height: 308px;
width: 600px;
margin-left: 78px;
padding: 0px;
line-height: 30px;
font-weight: normal;
text-indent: 5px;
}
#explanations {
font-family: Verdana, Geneva, sans-serif;
font-size: small;
color: #000;
margin-right: 80px;
margin-left: 80px;
width: 592px;
line-height: 5px;
}

#explanations2 {
font-family: Verdana, Geneva, sans-serif;
font-size: small;
color: #000;
margin-right: 80px;
margin-left: 80px;
width: 592px;
line-height: 5px;
}
.content ul, .content ol {
padding: 0 15px 15px 40px; 
}
ul.nav li {
font-family: Verdana, Geneva, sans-serif;
text-align: left;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
font-size: 14px;
background-color: #fff;
}
.clearfloat { 
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.fltrt {  
float: right;
margin-left: 8px;
}
.fltlft { 
float: left;
margin-right: 8px;
}

.b3a179 {
color: #b3a179;
}
.ComicsansMS {
font-family: Verdana, Geneva, sans-serif;
font-size: 18px;
}
.footer {
padding: 10px 0;
position: relative;
clear: both; 
background-color: #FFF;
font-size: 10px;
color: #000;
font-family: Verdana, Geneva, sans-serif;
text-align: center;
background-repeat: no-repeat;
max-width: 960px;

}

 

 

Any clue as to why the footer image floats right like it does?

 

Cheers,

 

hashstar

Edited March 7, 201214 yr by Renaissance-Design
Please use the code button or tags to format your code.

Hi, I think it is because your <div class="footer"> is a child of <div class="content"> instead of <div class="container">

 

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

<body>

<div class="container">

<div id="yourbasket">

<div id="h-navbar">

<div class="sidebar1">

<div id="apDiv1">

<div class="content">

<div class="footer">

</div>

</div>

</body>

</html>

Edited March 7, 201214 yr by annalan

Thanks!

 

 

How can i get the footer image to float in the centre?

 

 

 

Hi, I think it is because your <div class="footer"> is a child of <div class="content"> instead of <div class="container">

 

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

<body>

<div class="container">

<div id="yourbasket">

<div id="h-navbar">

<div class="sidebar1">

<div id="apDiv1">

<div class="content">

<div class="footer">

</div>

</div>

</body>

</html>

Did you make this website using a visual editor like dreamweaver by any chance?

 

For a start your image isn't tied into any css?

 

Why not try something like this

 

 
.footer {
width: 960px;
margin: 0 auto;
background: url('yourfilelocation/image.jpg') no-repeat center;
}

Edited March 7, 201214 yr by 4colourprogress

Hi,

 

4colourprogress:

The problems lies in the html divs, footer is part of content, so even if he will put background on footer it will still have same effect.

 

hashstar:

take a look at you index.html where it displays correctly. You need to close <div class="content">....</div> before <div class="footer"> starts. At the moment your footer is part of the "content" container thats why it doesnt spread in the width of container. Hope that makes sense. If you have problem with that send me your html and I will correct that.

 

BTW, floats can be left, right, inherit or none

 

Anna

Yeah Anna is correct, you need to move your footer out of the content div. +1

Had same problem some time ago, thats how I learned And firebug of course it a great tool for debbuging this stuff

Thank you Anna!!!!

 

That solved it, you are brilliant!

So happy you did it and I could help