Making a wrapper in HTML5 / CSS3

Question

I'm writing a new website in HTML5 and CSS3. I need to make some inner wrappers to center the content (960px wide). I usually do this via something like

<style>
 .nav { height:40px; background:#000; }
 .wrapper { width:960px; margin:auto; }
</style>
<div class="nav">
 <div class="wrapper">
  Home News Blog etc etc
 </div>
</div>

However, I am new using the new HTML 5 elements such as header, nav, article etc and am wondering the best way to make a wrapper similar to above but in a better way?

Take a look here - html5boilerplate.com They utilizing some best practices out there — Zoltan Toth
– Zoltan Toth, Commented Jan 31, 2012 at 21:41
@Zoltan Thanks for your reply but that's not what I'm after. Correct me if I'm wrong but I believe H5BP to be just another Moderizr which is no way related to my question. — Clarkey
– Clarkey, Commented Jan 31, 2012 at 21:44
Nope, it's not a single script or smth like that. It's basically a bunch of files to kick-start your development or prototyping. Usually you create the folders, index file, css files, js files, structure those - H5BP eliminates that step. So you have a basic website out of the box, with an index.html (if you scroll down and click on it you can see the markup), CSS reset/print/etc., some JS files included. Take a look at it ;-) It's exactly what you're looking for — Zoltan Toth
– Zoltan Toth, Commented Jan 31, 2012 at 22:01

Kebman · Accepted Answer · 2013-02-09 09:22:46Z

2

This is actually legal:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Wrapping up HTML5</title>
</head>
<body>
<div id="wrapper">
<header><h1>Using a HTML5 wrapper</h1></header>
    <section>
        <article>
            <hgroup>
            <h1>This is actually legal</h1>
            <h2>Just wrap everything in a div, just like before</h2>
            </hgroup>
            <p>But it's probably better to simply use the body tag.</p>
        </article>
    </section>
    <footer><p>Love from Kebman</p></footer>
</div>
</body>
</html>

However, it is probably advicable to simply use <body> as a wrapper. After all, it's cleaner and adds less HTML.

answered Feb 9, 2013 at 9:22

Kebman

2,0991 gold badge21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Yannis Dran Over a year ago

Good, but what about those who want to use some "sticky" footer technique such as this: fortysevenmedia.com/blog/archives/… ?

Kebman Over a year ago

I just stick some CSS in, maybe something like this: body{min-height:100%; position:relative;} footer{position:absolute; bottom:0;} And then I make sure the section or article tag has a bottom padding of at least the heigth of the footer.

Yannis Dran Over a year ago

I think you forgot footer{min-width: 100%;} and I wouldn't put body{position:relative;} as it doesn't help push down the footer. However, I guess that in certain occasions the footer may have a strange behavior.

Kebman Over a year ago

The width is up to you. footer {position: absolute} takes the footer element out of the element flow, while body {position: relative} forces the footer element back into the element flow as a child or branch of the body element. The technique is very useful for keeping child elements inside parent boundaries even after absolute positioning.

Jim · Accepted Answer · 2012-01-31 22:22:26Z

2

If you are looking for alternative methods, you can also use the body

body{ margin: 0 auto; width: 960px; }

answered Jan 31, 2012 at 22:22

Jim

1,2941 gold badge10 silver badges17 bronze badges

Comments

Rich Bradshaw · Accepted Answer · 2012-01-31 21:57:28Z

1

Well, use a nav element for the nav, otherwise the div is fine for dividing it up.

answered Jan 31, 2012 at 21:57

Rich Bradshaw

73.3k46 gold badges190 silver badges241 bronze badges

Comments

Carol Giles · Accepted Answer · 2016-01-21 15:47:58Z

0

I still place everything in a wrapper div even using header, nav, footer, main as I find it easier to control complete content

answered Jan 21, 2016 at 15:47

Carol Giles

1

Collectives™ on Stack Overflow

Making a wrapper in HTML5 / CSS3

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related