What is causing my border to not extend to the top and the bottom?

Question

My goal is to have a box around .toggles ("HTML, CSS, JS, Result"), and according to my instructor, we were supposed to set a border-right that would extend up and meet with the surrounding 1px black border. What is causing the space that's appearing above and below each vertical line?

JSBIN: http://jsbin.com/qipuzubure/1/

(In creating this jsbin a new problem has emerged: why is the inner div collapsing on top of itself when the window is shrunk?)

    body {
        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
        font-weight: 300;
    }


    #menuBar {
        width: 100%;
        height: 2.5em;
        display: table; 
        background-color: gray; 

    }

    #logo,
    #buttonDiv,
    .toggles {
        display: table-cell;
        vertical-align: middle; 
        width: 33%; 
    }

    .toggles {
        width: 20% ;
    }


    #logo {
        font-weight: bold; 
        font-size: 1em; 
        font-family: helvetica; 
        vertical-align: middle; 
        padding-left: 10px; 

    }

    .toggles {
        text-align: center; 
        border: 1px solid black;
        padding-bottom: 1px; 


    }

    .toggles ul {
        padding: 0;



    }

    .toggles li {
        list-style: none;
        display: inline;
        padding: 0 5px; 
        border-right: 1px solid black;

    }

    #buttonDiv {
        text-align: right; 
        padding-right: 10px; 
    }





</style>

<div id="wrapper">

    <div id="menuBar">

        <div id="logo">CodePlayer</div>

            <ul class="toggles">
                <li>HTML</li>
                <li>CSS</li>
                <li>JS</li>
                <li>Result</li>
            </ul>

        <div id="buttonDiv">

            <button id="runButton">Run</button>

        </div>


    </div>

</div>

Answer 1

1) The top and bottom borders are visible because you are displaying the menu using display: table.

display: table and display: table-cell are only necessary when creating tables or in exceptional circumstances.

Since you are creating a menu bar, you can use display: inline-block for some of the inner elements. This will help you correctly style your page.

2) The other issue regarding the widths is not really an error, the page is doing exactly what you're telling it to do. The middle section is keeping a width of 33%, the only way for the current content to fit within this area is to drop down.

Saying this, you can write rules to control what happens to the content in this scenario.

One thing to keep in mind when applying widths to elements is that if you then apply a left or right margin (or padding), it can throw off the width calculation and you may get a different width to what you were expecting.

The most stable way to do this is to wrap the elements in a container and set the width on that container.

Without knowing more about your example I can't give a definitive solution but one way would be to set a min-width: on the #menuBar div.

I've included a JSFiddle to demonstrate.

Answer 2

I think this is what you want:

WORKING: DEMO

Just alter the folloewing CSS:

CSS

    .toggles li {
    margin:0%;
    list-style: none;
    display: table-cell; /* Or use display:inline-block; but it will destroy vertical alignment of text*/
    vertical-align: middle; 
    height:35px; /*ADDED : You didn't specified the height*/
    padding: 0 5px; 
    border-right: 1px solid black;
}

Answer 3

Your elements are only occupying that space. The 'body' has 8px margin all around so if you remove that your bar will ocupy 100% of the page.

If you want your classe toggles to occupy more than this you need to set a height value to it.