Home/ Questions/Q 8711733
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T04:57:19+00:00

Why is following CSS-Code not filling up 100% of the screen? I’ve 5 columns

  • 0

Why is following CSS-Code not filling up 100% of the screen? I’ve 5 columns with a width of 20% percent floating left.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <style type="text/css" media="screen">
        body {
            padding: 0;
            margin: 0;
        }
        #container {
            width: 100%;
            background-color: red;
            height: 42px;
        }

        ul {
            padding: 0;
            margin: 0;
            width: 100%;
            overflow: hidden;
            list-style-type: none;
            float: left;
            white-space: nowrap;
            display: inline;
            height: 42px;
        }

        li {
            float: left;
            width: 20%;
            padding: 0;
            background-color: #000000;
            display: inline;
        }

        a {
            text-decoration: none;
            color: #333;
            text-align: center;
            display: block;
            height: 42px;
            line-height: 42px;
            white-space: nowrap;
            overflow: hidden;
            font-size: 0.9em;
            width: auto;
        }
        a:hover {
            background-color: #ccc;
            color: #FFF;
        }

    </style>
</head>
<body>
    <div id="container">
        <ul>
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Services</a>
            </li>
            <li>
                <a href="#">Portfolio</a>
            </li>
            <li>
                <a href="#">Clients</a>
            </li>
            <li>
                <a href="#">Articles</a>
            </li>
        </ul>
    </div>

</body>

There is always a red area on the right side, but 5*20% = 100% so that can’t be. What is wrong?

Kind regards,
PP

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I can see this issue in Safari. It only occurs sometimes when resizing the browser. It seems to be a rounding problem in WebKit browsers. I found this similar qwuestion “100% width divs not spanning entire width of the browser in webkit” with this comment:

    Thanks for the suggestions, unfortunately the issue persists. I think I’ve narrowed it down to Safari and Chrome rounding %-based widths to 1/2 of a percent (and no further) which results in the left over space unless the total width is “pixel-perfect”. Maybe I can think up a way to trick the browser into calculating it correctly, but the solution still eludes me at the moment.

    Maybe you can use display: table-cell on the <li>-tags to avoid this problem, as this should force the browser to always use the 100% width.

    Example HTML

    ​<div>
    <ul>
        <li><a href="">Value 1</a></li>
        <li><a href="">Value 2</a></li>
        <li><a href="">Value 3</a></li>
        <li><a href="">Value 4</a></li>
        <li><a href="">Value 5</a></li>
    </ul>
</div>​​​​​​​​​​​​​​​​​​​​​​

    Example CSS

    ​ul {
    display: table;
    width: 100%;
    min-width: 400px;
    margin: 0;
    padding: 0;
    background: red;
    list-style: none;
}

li {
    display: table-cell;
    width: 20%;
    margin: 0;
    padding: 0;
    text-align: center;
    background: green;
}

li > a {
    display: block;
    height: 42px;
    line-height: 42px;
    background: #ccc;
}

    Try before buy

    http://jsfiddle.net/Fsjns/

    • 0