CSS Forum

**Boar** · 11:45 AM

Hello, I am fairly new to coding CSS beyond text style sheets, so I am making a hybrid site right now to slowly learn.

I have built a css footer, that repeats for 100% width, problem is there is an annoying 6px gap on the left and right sides that I cannot figure out?

<html>
<head>

<style type="text/css">

#footer {
padding: 0;
border-top: 1px solid #626262;
background: #cccccc repeat-x;
position: relative;
height: 260px;

}
</style>

</head>

<body>

<table width="910" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>
<td width="910" height="1000"> </td>
</tr>
</table>

<div ID="footer"> </div>

</body>
</html>

If you plug this code into dreamweaver you can actually see the gap on the left and right side.

Thanks for any help!

**angele803** · 11-21-2007, 12:10 PM

Browsers add their own margins and padding.
Add this to your document and it should work:

Code:

body{
 margin:0;
 padding:0;
 }

**Boar** · 12:36 PM

Thanks, that works perfect!

I am now trying to get my text to align center inside my DIV tags, and it works with the h2 tag, but for some reason I cant get it to align center with a class tag using the same settings? Actually if I treat the class as a DIV, it works; for center aligned footer text, should I treat this as a DIV, Class, or H3 ?

<html>
<head>

<style type="text/css">

#footer {
padding: 0;
border-top: 1px solid #626262;
background: #cccccc repeat-x;
position: absolute;
height: 260px;
width: 100%;
}

#verysmall {
font-family: Arial, helvetica, sans-serif;
font-size: 12px;
padding-top: 15px;
color: #333333;
line-height: 20px;
text-align: center;
}

.small {
font-family: Arial, helvetica, sans-serif;
font-size: 12px;
padding-top: 15px;
color: #333333;
line-height: 20px;
text-align: center;
}

h2 {

font-family: Arial, helvetica, sans-serif;
font-size: 12px;
padding-top: 15px;
color: #333333;
line-height: 20px;
text-align: center;

}
</style>

</head>

<body>

<table width="910" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>
<td width="910" height="1000"> </td>
</tr>
</table>

<div ID="footer">

<H2>New Website </H2>
<span class="small">New Website </span>
<div id="verysmall> new site </div>

</div>

</body>
</html>

Thanks!

**Boar** · 11-21-2007, 02:25 PM

For my footer, how could I specify that it be at least 260px high, but then 100% high beyond the 260 - if there is space available in the browser?

Example, lets say my home page body is only 200px high, so I want the footer to fill in the entire bottom of the browser. But then on the interior my body is 1000px high, so I just want the footer set at 260px.

Here is the current code.

#footer {
padding: 0;
border-top: 1px solid #626262;
background: #cccccc repeat-x;
position: relative;
height: 260px;

}

**chrishirst** · 11-22-2007, 03:38 PM

A <span> is an inline elements that will only occupy the space of the contents, so it may well be centred but will never tell.

A <div> is a block element that occupies 100% of the parent container width unless it is given an explicit width.

the footer issue is similar to this one http://www.webmaster-talk.com/css-fo...gn-bottom.html but with a twist

One question though, Why do you have a repeat-x on the footer background without an image?

the simplest way is to set the background colour you want for the footer on the body element.
set all elements apart from the footer with an explicit background colour of white (#ffffff) and set the background colour of the footer to transparent. then when the content ends, everything below will be the body background colour.

**Boar** · 11:45 AM

Thanks chrishirst! BTW - the repeat-x code was left over from when I tried a bg image, I didnt catch that.

I am starting to understand this now. I was able to get the footer to work, by defining a body bg color - then I took the main content area of my body - a table and applied a div with a css rule of 100% width with a color, so this really is a hybrid website now.

One thing that I am worried about is can I have tables as I have now with div's around them? And after the table code ends, I have div /div, for the footer - is that going to work?

I see most sights use wrappers, that wrap the entire css contents, but since this is a hybrid, do I need a wrapper? And What exactly does a wrapper do?

Thanks for any help!

**chrishirst** · 11-26-2007, 02:41 PM

Just be aware that tables don't always "play nicely" with enclosing divs,

A "wrapper" element is useful when testing layouts for different target resolutions and screen types, it's simple to apply widths, colours etc to the one element and have everything else follow suit.