CODEWITHSUNDEEP
htmlcss
Clarkey
Clarkey

Reputation: 708

Making a wrapper in HTML5 / CSS3

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?

Upvotes: 3

Views: 41696

Answers (4)

Carol Giles
Carol Giles

Reputation: 1

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

Upvotes: 0

Kebman
Kebman

Reputation: 2079

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.

Upvotes: 2

Jim
Jim

Reputation: 1294

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

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

Upvotes: 2

Rich Bradshaw
Rich Bradshaw

Reputation: 72965

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

Upvotes: 1

Related Questions