Dan Rose is a Front End Web Developer from Birmingham UK, with a creative mind. He's obsessed with his workflow and constantly improving it. When he's not playing with CSS and JavaScript he's watching cat videos and drinking tea with muffins.

Dan's articles

  1. Responsive, Fluid-Width, Variable-Item Navigation with CSS

    Around six months ago I was asked to develop a single row navigation bar that could contain a variable number of menu items while filling the entire width of the container. The amount of navigational items was dictated elsewhere and likely to change in future.

    Thinking ahead, it would have been impractical to change the CSS every time a menu item was added or removed. A resolution had to be found, ideally without using JavaScript.

    Using Percentage Widths

    Fixed widths are unable to consistently fill the responsive container, as the below image illustrates.

    Fixed-width nav example

    So we need to use percentages to accomplish this. Percentages are the prevalent method to achieve a fluid grid layout in responsive designs and will come in useful here.

    For example, take the below familiar HTML into consideration:

    [code language="html"]

    [/code]

    And we’ll add the following CSS:

    [code language="css"]
    nav {
    width: 100%;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-right: none;
    }

    nav ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
    }

    nav ul li {
    list-style: none;
    float: left;
    text-align: center;
    border-left: 1px solid #fff;
    border-right: 1px solid #ccc;
    width: 16.6667%; /* fallback for non-calc() browsers */
    width: calc(100% / 6);
    box-sizing: border-box;
    }

    nav ul li:first-child {
    border-left: none;
    }

    nav ul li a {
    display: block;
    text-decoration: none;
    color: #616161;
    padding: 10px 0;
    }
    [/code]

    Areas of note are:

    • The <nav> element is given width: 100% to fill the entire available space.
    • <li> elements are supplied with two width properties – width: calc(100% / 6); and width: 16.6667%;. This is where the menu items are divided across the <nav> element into 6 equal widths. The order these properties are listed is important to allow browsers that support calc() to utilize it over the standard percentage width. Browsers without support for calc() will simply ignore it and use the fallback. I tend to use calc() with percentages to assist in readability and to allow the browser to use the result it is optimized for. That way I don’t have to worry about whether to include recurring decimal places.
    • box-sizing: border-box; is declared on the <li> elements. This forces the width property to include the border-left and border-right values in the total width. Without using this property, the <li> elements wouldn’t fit within the <nav> area and the last <li> element would wrap onto a new line. Many prefer to set box-sizing: border-box; to all elements in order to easily manage widths, as Paul Irish suggests.

    The result of adding these styles is shown in the CodePen demo below: