CODEWITHSUNDEEP
htmlcssalignment
Doug Fir
Doug Fir

Reputation: 21302

footer in html5

I am trying to create a footer which spans the width of the screen. It was nested in the body tag (centered by using margin left/right auto) which had a width of 825px so I took it out and nested under the html tag, thereby removing the width constraint.

What it looks like now though is that the footer element is aligned with the centered body tag at the bottom left. I'd like it to start at the very left hand of the screen.

What must I do to have the footer element span the full width of the screen going left to right?

Upvotes: 0

Views: 4688

Answers (3)

Dennis Traub
Dennis Traub

Reputation: 51684

body, footer { 
    width:100%; 
}

#main {
    width: 825px;
    margin-left: auto;
    margin-right: auto;
}

<body>
    <div id="main">
        /* Your page content */
    </div>
    <footer>
        /* Your footer content */
    </footer>
</body>

And I totally agree with @Yuri's comment to your post: Stay with the specification, don't put tags outside <body> or even <html>. Event if most browsers may be tolerant, it probably will be rendered incorrectly by some.

Upvotes: 1

khollenbeck
khollenbeck

Reputation: 16157

You do not want to have your footer outside of the HTML tag. Something like this should work.

If you have a width set on your body tag 100% will only extended to the width set on your tag. Also if you intend to use HTML5 I suggest using the <footer></footer> tag. Keep in mind though that HTML5 needs hacks to work on older browsers.

<style type="text/css">

body {/*use this to declare font-family and other common attributes */}
#header {width:825px;height:200px;margin:0 auto 0 auto}/*or whatever your dimensions are*/
#main-content-wrapper {width:825px;margin:0 auto 0 auto;}
#footer {width:100%;}


</style>

<html>
<head>
<title></title>
<head>

<body>

<div id="header"></div>

<div id="main-content-wrapper"></div>

<div id="footer"></div>

</body>

</html>

Upvotes: 1

Sven Bieder
Sven Bieder

Reputation: 5681

I'm not quite sure if I fully get what you mean. But I think this might help you.

CSS:

body, footer{
width:100%;
}

with that you set the span (width) of footer and body to the width of the screen.

Upvotes: 0

Related Questions