Nav bar inside body not spreading evenly using percentage?

Question

I am creating a nav bar and have 3 tabs e.g (home, about, contact) I wish to spread evenly. I want left & right side of each tab to have a 15%. This should add up to a total of 90% of the page however the third tab seems to appear underneath on a separate line.

Am I missing a default margin somewhere or what am I doing wrong? I want to stick to percentages as much as possible to suit multiple devices.

I have located the nav inside of the body. Please see CSS below:

body {
background-color: pink;
}

h1 {
text-align: center;
margin-bottom: 4.5%;
color: #fff;
font-family: Florence, cursive;
text-shadow: 2px  0 black;
}

nav ul {
list-style: none;
}

nav li {
display: inline-block;
margin-left: 15%;
margin-right: 15%;
}

Apologies I am a rookie at present. I haven't assigned a width, as far as I am aware, you cannot assign a width to anything that is displayed inline. Does each element have same default width? — Sarah, Oct 25 '16 at 21:30
Inline elements ignore `width`, but inline-blocks respect it. If you don't set any width, the width will be the one of the contents. So unless the elements are empty, they could exceed 100% and wrap to the next line. — Oriol, Oct 25 '16 at 21:32
Ah I see, makes perfect sense now. Thank you so much. I assigned the width to the li and divided what I had left. It is perfect now. Thanks again for your help! — Sarah, Oct 25 '16 at 21:43
@Sarah block level elements by default will fill the full width of their parent element. Inline elements only take up as much space as needed. If you float elements or change their positioning these defaults might be affected. See [Block vs Inline](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements). — hungerstar, Oct 25 '16 at 21:43
@hungerstar - Thanks a mil. Makes things a lot clearer for me. — Sarah, Oct 25 '16 at 21:47
**Note:** inline elements will add white space and will often take up more space than desired - i.e. 4 inline block elements at 25% width will add up to more than 100% width and the last element will reflow due to the extra white space. [Here is an example](https://jsfiddle.net/gajz2qvg/1). — hungerstar, Oct 25 '16 at 21:48

score 0 · Accepted Answer · edited May 23 '17 at 10:27

By default, elements have width: auto. In case of inline-blocks, this will be the width of the contents (unless that's greater than the available width).

So, unless your elements are empty, it's reasonable that they end up summing more than 100%, and thus wrap to the next line.

div {
  display: inline-block;
  margin-left: 15%;
  margin-right: 15%;
}

<div>a</div><div>b</div><div>c</div>
<hr />
<div>aaaaaaaaaaa</div><div>bbbbbbbbbbbb</div><div>ccccccccccc</div>

What you should do is specify a width, or a max-width. Since the margins alone sum 90%, diving the remaining 10% would be width: calc(10%/3).

div {
  display: inline-block;
  margin-left: 15%;
  margin-right: 15%;
  width: calc(10%/3);
}

<div>a</div><div>b</div><div>c</div>
<hr />
<div>aaaaaaaaaaa</div><div>bbbbbbbbbbbb</div><div>ccccccccccc</div>

Be aware there might be some extra spaces, see How to remove the space between inline-block elements?

score 0 · Answer 2 · edited Oct 26 '16 at 13:28

0

As an alternative, remove all the margins and widths and just try to add this

nav ul {
    display: flex;
}

This will distribute the nav ul items evenly across the page.

edited Oct 26 '16 at 13:28

hungerstar

21,206
6
50
59

answered Oct 25 '16 at 22:03

Johannes

64,305
18
73
130

Nav bar inside body not spreading evenly using percentage?

2 Answers2