1. Home
  2. Forums Index
  3. Browser Side / CSS 1:08 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Footer gap on the Left

         

dardisintel

1:11 am on Nov 8, 2011 (gmt 0)

10+ Year Member



I have a gap on the left side of my footer showing the background image.. My footer is set up to slide up and down if I add or remove content.. Here is my css and HTML Please help!

<body class="body">
<div class="wrapper">
<img src="/images/Logo.png" class="logo" alt="SEO" />

<div id="tabsH">
<ul>
<li><a href="http://www.example.com" title="Home"><span>Home</span></a></li>
<li><a href="http://www.example.com/webdesign.html" title="Web Design"><span>Web Design</span></a></li>
<li class="selected"><a href="http://www.example.com/0seo.html" title="SEO"><span>SEO</span></a></li>
<li><a href="http://www.example.com/inquiry.html" title="Inquire"><span>Inquire</span></a></li>
<li><a href="mailto:admin@example.com" title="E-Mail">E-Mail</a></li>
</ul>
</div>
<img src="/images/seo.jpg" class="seograph" />


<div class="lowercontent">
<h1>Services</h1>
Example text
<h2>Traffic</h2>
Example text
<br />
Example text<br />
Example text
<h1>Content</h1>
Example text
<h1>Advantage</h1>
Example text
<h1>Campaign</h1>
Example text</div>
</div>
<div class="push"></div>
<div class="footer">
<img src="/images/footer.png" alt="footer" /></div>

</body>
</html>


<style type="text/css">

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -350px;
width: 100%;

}
.footer{
position:relative;
background:url("/images/footer.png");
height: 350px;
width: 100%;
margin:0 auto;
left: 0px;
}

.push {

position:relative;
height: 100px;
width: 100%;
}

#tabsH {
position:absolute;
float:left;
left:200px;
top:247px;
width:100%;
font-size: 14px;
line-height:normal;
text-align:center;
}
#tabsH ul {

margin:0;
margin-left: 0px;
padding: 0px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
margin-left: 0px;
padding:0;
}
#tabsH a {
float:left;
background:url("/images/tableftH.gif") no-repeat left top;
top:213px;
width:160px;
margin:0;
margin-right:8px;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url("/images/tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}

#tabsH #current a {
background-position:0% -42px;
}
#tabsH #current a span {
background-position:100% -42px;
}

a {
color: #0066FF;
}

.h1 {
font-size: 14px;

}
.body {
background-image: url('/images/backgroundnovember.png');
background-repeat: no-repeat;
overflow-x:hidden;
overflow-y:auto;
z-index: 1;

}

.content {

margin-left: 200px;
margin-right: 200px;
margin-top: 300px;
}

.lowercontent {

margin-left: 200px;
margin-right: 200px;
margin-top: 38%;
}

.largeimage {
height: 431px;
float: left;
padding-right: 35px;
}

.inquiretable {
border-style: double;
border-width: 8px;
border-color:black;
}

.seograph {
position: absolute;
left: 208px;
top: 300px;
border-style: inset;
border-width: 8px;
border-color: #41627E;
}

.indexslide {

margin-left: 200px;
border-style: inset;
border-width: 8px;
border-color: #41627E;
}

.logo {

position: absolute;
background:url("/images/Logo.png");
left: 69px;
background-repeat: no-repeat;
top: 10px;
z-index: 2;
}
#largeImg {
border: solid 1px #ccc;
width: 550px;
height: 400px;
padding: 5px;
}
.thumbs img {
border: solid 1px #ccc;
width: 100px;
height: 100px;
padding: 4px;
}

</style>

[edited by: alt131 at 4:01 am (utc) on Nov 8, 2011]
[edit reason] Thread Tidy - Examplifying [/edit]

Paul_o_b

2:12 pm on Nov 8, 2011 (gmt 0)

10+ Year Member



Hi,

It looks like you are doing a "sticky footer" although I don't really see the need as sticky footers are best suited for small height footers and not great big ones at 350px high as they will probably be below the fold anyway.

Anyway the problem is that you have the footer at 350px high and the negative margin at 350px high but your push element is only 100px high which means the footer will overlap the content by 250px.

Change your push to 350px height and it should fit together ok.

The margin-top 38% on your lower-content is a bit odd because percentage margins refer to the width of the containing block and not the height so the distance to the top will vary depending on how far the window is open which surely is not what you wanted.

Try not to mix absolute elements and static elements into the mix unless you can control them explicitly and control the flow of the page. It looks like you are trying to place content for seo but your page is badly constructed and with multiple h1 on the page (there should only be 1 (oustside of html5)) it is unlikely that you will get any benefit from moving things around.

Lastly the sticky footer method you are using is out dated and broken in most browsers so don't use it.

Here is a bare bones sticky footer that should work more or less everywhere. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
* {/* for demo only*/
margin:0;
padding:0
}
h1, h2, p { padding:0 10px; }
html, body {
height:100%;/* needed to base 100% height on something known*/
text-align:center;
}
#outer {
width:760px;
background:#ffffcc;
margin:auto;
min-height:100%;
margin-top:-40px;/* Match footer height - this drags the outer 40px up through the top of the monitor */
text-align:left;
clear:both;
}
* html #outer {height:100% }
#header {
background:red;
border-top:40px solid #fff; /* match footer height - soak up negative margin and allows header to start at top of page*/
}
#footer {/* footer now sits at bottom of window*/
background:red;
width:760px;
margin:auto;
height:40px;/* must match negative margin of #outer */
clear:both;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* negate effect of float*/
}
#outer:after {/* ie8 fix*/
clear:both;
display:block;
height:1%;
content:" ";
}
</style>
</head>
<body>
<div id="outer">
<div id="header">
<h1>Sticky Footer</h1>
</div>
<p>test</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
</html>

dardisintel

11:49 pm on Nov 9, 2011 (gmt 0)

10+ Year Member



Hi Paul, thank you for the reply, I will definitly make some changes.

This doesn't seem to fix my problem though. My gap is on the left side of the footer. Content in my wrapper and down starts at about 10 pixels to the right instead of 0..

Paul_o_b

9:37 am on Nov 10, 2011 (gmt 0)

10+ Year Member



You're not talking about the margin/padding on the body are you? 


html,body{margin:0;padding:0}

dardisintel

1:53 pm on Nov 10, 2011 (gmt 0)

10+ Year Member



YES thank you!

dardisintel

1:55 pm on Nov 10, 2011 (gmt 0)

10+ Year Member



My next question is how to make all the content on my page stay where it is when you adjust the window size?

Paul_o_b

4:53 pm on Nov 10, 2011 (gmt 0)

10+ Year Member



Well for a start don't use things like "margin-top: 38%;" as the 38% refers to the width of the parent and nothing to do with the height. If you open or close the window width then that top margin will increase or reduce respectively.

If you were trying to avoid some fixed height element then use pixels and percent.

If it's a fluid layout then you should expect for things to move around as the page opens and closes. Avoid absolute elements unless they are within a contained context where they will not overlap other elements.

dardisintel

4:00 am on Nov 11, 2011 (gmt 0)

10+ Year Member



Okay that makes sense... I have tabbed navigation on top, and when I adjust the width of the window my tabs start stacking on top of each other and my content does the same, I would like it to stay exactly where it is even if that makes it not visible without scrolling to the right.... Does th

dardisintel

4:00 am on Nov 11, 2011 (gmt 0)

10+ Year Member



*Does that make sense?

Paul_o_b

9:06 am on Nov 11, 2011 (gmt 0)

10+ Year Member



If you don't want elements to wrap then they need to be in fixed width containers.

For your tabs you would need to apply a width that is wide enough to contain them. 

#tabsH {
position:absolute;
left:200px;
top:247px;
width:900px;
font-size: 14px;
line-height:normal;
text-align:center;
}



You had used 100% but that means the element is too big for the page because 100% + left 200px means it will always be 200px too wide for wherever it sits. Which is probably why you hid the overflow-x on the body which is something you should never do as that stops the user from accessing any content at small screen sizes.

It looks as though you probably should be designing a fixed width layout rather than a fluid one if you don't want elements to wrap. If that was the case you would apply a width to the main wrapper and use margin:auto to center the page.

I would suggest that you start again without the absolute positioning and put everything back in the flow to make it easier to manage. Bur first decide whether you are designing a fluid layout or a fixed layout or an elastic layout (min and max widths).
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 1:08 pm May 1, 2026