Navigation gets broken with display:inline

Question

I've the following HTML-Markup for my fullscreen-navigation:

<div class="container">
  <nav>
    <section class="navabout">
      ABOUT
    </section>

    <section class="navphotography">
      PHOTOGRAPHY
    </section>

    <section class="navdesign">
      DESIGN
    </section>
  </nav>
</div>

And the CSS for my navigation is:

.container > nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.container > nav > section{
    width: 33%;
    height: 100%;
  display:inline;  <-- makes the fault!!!
}
.container > nav > section.navabout{
    background: url(http://eofdreams.com/data_images/dreams/face/face-01.jpg) no-repeat center; 
  background-size: cover;
}
.container > nav > section.navphotography{
    background: url(http://www.digitaltrends.com/wp-content/uploads/2010/02/digital-camera-buying-guide-header.jpg) no-repeat center; 
  background-size: cover;
}
.container > nav > section.navdesign{
    background: url(http://media.peugeot.com/images/backgrounds/design/concept-peugeot-design-lab.jpg) no-repeat center; 
  background-size: cover;
}

The problem here is, that the navigation is listed under each other like that:

ABOUT
PHOTOGRAPHY
DESIGN

And because I've the height of one element set to 100%, I can't see the other two.
So to make a horizontal list order, I set display:inline; to the .container > nav > section part. It works, but the list element won't be height 100% anymore.

So how can I achieve my goal?

Codepen Demo (Just set display:inline; to .container > nav > section to see what I don't want to have)

1

Try display:inline-block; – Boogeroos Feb 25 '14 at 13:44

score 1 · Accepted Answer · answered Feb 25 '14 at 13:44

1

Instead of doing display:inline;, do float:left;. Check THE DEMO.
Your code should look something like:

.container > nav > section{
    width: 33%;
    height: 100%;
    float: left;
}

answered Feb 25 '14 at 13:44

Dhiraj

1,871
1
12
15

score 1 · Answer 2 · answered Feb 25 '14 at 15:00

I'd use inline-block here as it offers a bit more flexibility than floating items. The one quirk is you need to remove any white space between your sections. You can also do things like changing the vertical alignment of the boxes with vertical-align: top|middle|bottom|.... lots more options

<div class="container">
  <nav>
    <section class="navabout">
      ABOUT
    </section><section class="navphotography">
      PHOTOGRAPHY
    </section><section class="navdesign">
      DESIGN
    </section>
  </nav>
</div>


.container > nav > section {
    width: 33%;
    height: 100%;
    display: inline-block;
}

If you're using a nav element just make sure you have some a tags in there or there is nothing the browser understands as an element for navigating. If all the boxes

<div class="container">
  <nav>
    <a href="somewhere" class="navabout">
      ABOUT
    </a><a href="somewhere-else" class="navphotography">
      PHOTOGRAPHY
    </a><a href="another-link" class="navdesign">
      DESIGN
    </a>
  </nav>
</div>


.container > nav > a {
    width: 33%;
    height: 100%;
    display: inline-block;
}

+1 for the useful answer with inline-block. First: Why is this more flexible than float:left? Second: But I don't want to have links. Because I only fire some jQuery elements. I also don't want to change the URL... What means by "understands as an element for navigating". So screenreader (for example) can't see it is a navigation? — , Feb 25 '14 at 15:22
+1. @LongJohn: `display: inline-block;` is the better solution! Take a look to this answer (http://stackoverflow.com/a/11823622/1584286) where the differences and possibilities between these solutions. — Michael Schmidt, Feb 25 '14 at 15:41
Hi John, I am not sure that a screen reader will understand sections within a nav block as navigational elements. I might be wrong but I think they understand a tags as the links, you can probably use ARIA links for this but I am no expert. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role. As for inline-block it tends to behave better and is less likely to do anything weird and you can play with vertical alignment. — Ric, Feb 25 '14 at 16:26

Navigation gets broken with display:inline

2 Answers2