Strange behavior with em widths

Question

I'm currently trying to learn adaptive/mobile web-design, which involves media queries for different platforms and resolutions, using em rather than px in designs etc. I am currently trying to place two em-width elements next to each other; a navigation/info bar next to my content.

I have set the info bar to be 16em wide (translates into 16px per em according to font-size) and the content to be calc(100% - 17em) wide. I'd assume this should leave 1em of margin between the menu and the content, no matter how much I zoom and resize my window, but the end result disagrees:

100% zoom

25% zoom

friend's screen

The space between the elements changes vastly by zoom level, although everything universally uses 'em' units and the font-size is not changed between relevant elements. What could possibly be the issue?

Info: I'm using a media query to transition the navigation from horizontal alignment to a sidebar. It's the queried version that is acting up. Keep this in mind when looking over the CSS. It might be part of the problem, though I seriously doubt it...

#contentwrap {
    margin-top: 1em;
    border: 1px solid #000;
    border-radius: 8px;    
}

#content {
    border-radius: 8px;
    padding: 2em;

#navbar {
    margin-top: 1em;
    border: 1px solid #000;
    border-radius: 8px;
    width: 100%;
    display: table; 
    font-family: 'Cabin', sans-serif;  
}

.navelement {
    font-size: 0.8em;
    width: 25%;
    padding: 1em;
    text-align: center;
    display: table-cell;
}

#nav4 {
}

@media (min-width:1580px) { 
    #navbar {
        border: 1px dashed red;
        padding: 0px;
        width: 16em;
        float: left;
        background-image: none;
    }

    .navelement {
        font-size: 0.8em;
        background-image: url('../img/navbg.png');
        background-size: 100% 100%; 
        width: 20em;
        display: inherit;
        border: 1px solid;
        border-color: #303030 #101010 #101010 #101010;
        border-radius: 8px;
        margin-bottom: 1.25em;
        padding: 1.25em;
    }

    #nav4 {
        background-image: url('../img/navbg.png');
        background-size: 100% 100%;
        margin-bottom: 0em;
    }

    #contentwrap {
    float: right;
    width: -moz-calc(100% - 17em);
    width: -webkit-calc(100% - 17em);
    width: calc(100% - 17em);
    }
}

HTML code:

<div id="navbar">
            <div id="nav1" class="navelement"><b>Current news post:</b><br/>"Welcome to usp3!"<br/>by ividyon</div>
            <div id="nav2" class="navelement"><b>Current MOTW:</b><br/>"Some Map"<br/>by some guy</br>[ Link to thread ]</div>
            <div id="nav3" class="navelement"><b>Recent additions:</b><br/>- "Some map" review by Delacroix<br/>- Article: "Blah blah blah.." by ividyon<br/>- "Some other map" review by ividyon</div>
            <div id="nav4" class="navelement">Recent forum posts:</br>- "This design is not good!"<br/>by A Dude</br>- "Too lazy to type filler..."<br/>by ividyon</br>- "Too lazy to type filler..."<br/>by ividyon</br>- "Too lazy to type filler..."<br/>by ividyon</div>
        </div>

        <div id="contentwrap">
            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut purus tortor. Maecenas ut semper dui, ac convallis libero. Vivamus molestie mauris a mauris pretium, et dignissim mauris dictum. Vivamus et interdum ipsum, vitae facilisis massa. In auctor convallis feugiat. Nulla sit amet accumsan ipsum. Sed risus felis, sodales ornare nisl a, scelerisque fringilla neque.</p>
            </div>
        </div>

Answer 1

The content of your #navbar is wider than the width you have given to the #navbar itself.

#navbar would be 16em+2px = 258px (at a font size of 16px), while the content would be 20em+2.5em+2px = 290px (at a font size of 12.8px).

And since the #navbar has display:table, its own width will adjust itself to the width of its children rather than let the content overflow out of its boundaries. Tables do that.

So, calc(100%-17em) for the remainder doesn't make it. Either calculate a smaller width, or, since the navbar has float:left anyway, you can leave out the width altogether! Simply set the left margin if desired and you're done.

See Fiddle.