CODEWITHSUNDEEP
htmlcss
Michael Scheper
Michael Scheper

Reputation: 7048

<nav> down the left of the page

One of the benefits of HTML 5 are semantic tags like <header>, <nav> and <main>.

Unfortunately, I haven't found a way to style them so the <nav> goes down the left of the page, not without a parent <div>, anyhow. It seems to me that such a <div> messes up the semantics, and I'm not sure it's technically valid HTML.

<header>My Page</header>
<div class="nav-main"> <!-- I don't like this -->
    <nav>
        <a href="/foo.html">Foo</a>
        <a href="/bar.html">Bar</a>
    </nav>
    <main>
        <h1>My Main Content</h1>
        <p>Blah.</p>
    </main>
</div>
<footer>ⓒ Not really copyright</footer>

The CSS:

div.nav-main {
    display: flex;
}
nav {
    width: 10em;
}
nav a {
    display: block;
}

Is there a clean way to do it, without the <div>?

I don't think an old-school float: left is a solution, because I don't want the <main> to wrap around the <nav> if it's taller, and I don't want to add arbitrary heights or other hacks. I just want the <main> and <nav> to both be their natural heights and have consistent widths, and for the <footer> to be underneath both.

Otherwise, if somebody can cite assurance that wrapping <nav> and <main> in a <div> is okay, I'll just thank you and move along… although it still doesn't look very elegant to me.

Upvotes: 1

Views: 112

Answers (3)

Vicky
Vicky

Reputation: 36

So a <div> is a non-semantic element, so you technically have valid html here. But I understand not wanting divs everywhere. You could potentially put flex on the body, set the width of the header and footer to 100% so they would be on their own line. So it'd be

body 
{
 display:flex;
 flex-flow: row wrap;
}
header, footer
{
 width:100%
}

Hopes this helps!

Upvotes: 1

Michael Scheper
Michael Scheper

Reputation: 7048

I still haven't found 'official' (W3C) word about whether a <div> can be a legal parent for a <nav> or <main>, but I do trust Mozilla's web docs. They state that:

So in this example, the <div> is fine.

Upvotes: 1

isherwood
isherwood

Reputation: 61063

You're trying too hard to achieve minimalist markup. What you have there is extremely simple compared to almost any website. If it works to have a couple div elements for layout, there's no issue.

The key is that relevant content is contained in your semantic elements, not that you only use semantic elements. If you're doing any sort of modern, flexible, responsive layout it can't be avoided.

Upvotes: 1

Related Questions