How can I get my html footer to fit the full width of the screen?

Question

css


.footer{
position:absolute;
height: 6em;
width:100%;
}



Html

Answer 1

there is no width set for the body, so you get the browser defaults

try



#footer{ width:100%; height:23px; background-image:url('../img/site_layout/footer_gradient.gif'); background-repeat:repeat-x; margin-top:40px; margin-bottom:-8px; text-align:center; }

try also to get away from pixels for layout

px dont work, on any monitor except yours the layout may be totally unviewable, users leave in droves if there are horizontal scroll bars, mice dont have hscroll wheels

and if they have a widescreen, most of the screen is unoccupied



px dont adjust to user preference

px become vanishingly small on hi res-monitors, annoyingly large on low res (like handheld) devices

current best practice is ems , % for anything except an image, images are pixel sized

using a relative scale, like an em or %, allows for accessibility,

blind freddy to set his basefont to 100px,

your site adjusts to a font that blind freddy can read, based around 100% or 1em being 100px

for blind freddy, 14px might as well be 1px[indent]to any visually impaired person named Fred, blind freddy is an archetype not an individual[/indent]

Answer 2

You can't make a background fit perfectly for every computer... unless it's a pattern. The standard computer screen is 800 x 600 pixels, so try resizing the image.

Answer 3

You need to use JavaScript code.