Links not lining up with inline-block

Question

I'm trying to get the three links - LOGO, About, and FAQ to show up on the same line, but I'm unable to do so. It seems that the margin-left on my nav-link class is screwing things up, but I'm not sure why.

body, html {
    background-color: #EDEDED;
}
.nav {
    position: absolute;
    width: 80%;
    margin: 5%;
}
.nav-link {
    margin-left: 2%;
}
.nav-part {
    display: inline-block;
}
.apply {
    float: right;
    position: relative;
    right: 0;
    top: 0;
}

<div class="nav">
    <div class="nav-part">
        <a href="/" class="brand-logo">LOGO</a>
        <a href="/about" class="nav-link">About</a>
        <a href="/faq" class="nav-link">FAQ</a>
    </div>
    <div class="apply nav-part">
        <button>Apply</button>
    </div>
</div>

Here's my jsfiddle - https://jsfiddle.net/hcrcba06/1/

just take the margin-left out and it works fine. or change it to something more appropriate (px,em) — ElefantPhace, Apr 12 '15 at 18:48
[Why are margin/padding percentages in CSS always calculated against width?](http://stackoverflow.com/questions/11003911/why-are-margin-padding-percentages-in-css-always-calculated-against-width) — Stickers, Apr 12 '15 at 19:45

Muhammad · Answer 1 · 2015-04-12T18:54:32.143

1

the div that contains your links does not have much room to put the links on the same line so it brings the last one to the next line just increase the width of your nav-part class and it will work. JSFiddle here

edited Apr 12 '15 at 18:54

answered Apr 12 '15 at 18:48

Muhammad

6,725
5
47
54

score 1 · Answer 2 · answered Apr 12 '15 at 19:00

You could easily solve that by changing it to CSS table layout.

body, html {
    background: #EDEDED;
}
.nav {
    display: table;
    width: 80%;
    margin: 5% auto;
}
.nav-part {
    display: table-cell;
}
.nav-link {
    margin-left: 2%;
}
.apply {
    text-align: right;
}

<div class="nav">
    <div class="nav-part">
        <a href="/" class="brand-logo">LOGO</a>
        <a href="/about" class="nav-link">About</a>
        <a href="/faq" class="nav-link">FAQ</a>
    </div>
    <div class="apply nav-part">
        <button>Apply</button>
    </div>
</div>

Alessandro Incarnati · Accepted Answer · 2015-04-13T19:04:19.210

0

It's because you are using margin in percentages.

Margins in percentages are always relative to the width of the containing block.

Remove the margin-left in percentages. If you add a fixed margin it will work.

Use:

.nav-link {
  margin-left: 12px;
}

instead of

.nav-link {
  margin-left: 2%;
}

DEMO: https://jsfiddle.net/hcrcba06/3/

edited Apr 13 '15 at 19:04

answered Apr 12 '15 at 18:52

Alessandro Incarnati

7,018
3
38
54

You can set the margin as fixed at any value but not in percentages. Try :) – Alessandro Incarnati Apr 12 '15 at 18:53
What's the reasoning behind this? – user2635088 Apr 12 '15 at 19:01
Margins in percentages for ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block, not the height and in vertical flow, ‘margin-left’ and ‘margin-right’ are relative to the height, not the width. – Alessandro Incarnati Apr 12 '15 at 19:04
That's why usually is better to use margins in px or em. But it all depends on what you need to do and the given requirements. – Alessandro Incarnati Apr 12 '15 at 19:07
Can you elaborate please? – Alessandro Incarnati Apr 13 '15 at 17:01
If the containing block’s width depends on the element to which percentage margins are applied, the resulting layout is undefined in CSS2.1. More verbosely this would be apparent for floated or absolutely positioned elements without an explicit width set, where a child element has margin expressed as a percentage. The parent element needs to know the dimensions of the child element to compute its own width (shrink-wrapping the contents), but the child box element also needs to know the parent's width to compute its margin (and hence its dimensions). – Alessandro Incarnati Apr 13 '15 at 17:09
"‘margin-left’ and ‘margin-right’ are relative to the height, not the width." - that's wrong. – Stickers Apr 13 '15 at 17:13
I think you should be 100% sure and documented before downvoting answers. Look why my answer, check this link: http://dev.w3.org/csswg/css-box/#the-margin-properties Now go down and search for this bit of text: "Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block, not the height (and in vertical flow, ‘margin-left’ and ‘margin-right’ are relative to the height, not the width)." – Alessandro Incarnati Apr 13 '15 at 17:25
"The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1." - http://www.w3.org/TR/CSS2/box.html#margin-properties – Stickers Apr 13 '15 at 17:35
Check out this fiddle - http://jsfiddle.net/y02a95hk/ the % margin on the child has nothing to do with the parent height. – Stickers Apr 13 '15 at 18:05
My bad. I was reading an editor draft which is not a final one like the CSS 2.1 box model specification. I'm not sure in which case that happens but yes it's true it's based on the width. I will edit my answer now. Thanks for pointing that out! :) – Alessandro Incarnati Apr 13 '15 at 19:03
In this particular case though, because his layout was a bit different than your jsfiddle, it actually was breaking. Not sure if because one of the wrappers had absolute position applied. Well, removing the margin in percentage fixes it. – Alessandro Incarnati Apr 13 '15 at 19:07
Don't take it personally, the -1 was just for giving you an attention. – Stickers Apr 13 '15 at 20:01
No worries, issue closed now :) Thanks again for pointing that out. – Alessandro Incarnati Apr 13 '15 at 20:04

Links not lining up with inline-block

3 Answers3