A HTML List with Five Columns

Why isn't the CSS code filling up 100% of the screen? I have 5 columns with a width of 20% 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 right. What am I missing?

Regards, PP

Answer №1

Observing this issue in Safari, I have noticed that it only occurs intermittently when resizing the browser. It appears to be a rounding error in WebKit browsers. I came across a similar question "100% width divs not spanning entire width of the browser in webkit" with an insightful comment:

Despite trying various suggestions, unfortunately, the issue persists. From what I can gather, Safari and Chrome seem to round % based widths to half of a percent (and no further), resulting in leftover space unless the total width is exact to the pixel. Perhaps there's a clever workaround to trick the browser into calculating it accurately, but as of now, the solution remains elusive.

You might consider using display: table-cell on the <li> tags to circumvent this issue, as it should compel the browser to consistently enforce the 100% width.

Sample HTML Code

​<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>​​​​​​​​​​​​​​​​​​​​​​

Sample CSS Code

​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;
}

Experiment Before Implementation

http://jsfiddle.net/Fsjns/

Answer №2

When we calculate the resolution for 1024*(20/100), the result is 204.8 px

Similarly, when we calculate the resolution for 1366*(20/100), the result is 207.2 px

In my opinion, it is not possible for a screen to display less than one pixel

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing my screen reader to repeat lines?

I have this HTML structure: <button ng-disabled="vm.updating" ng-click="doSomething()" class="something" type="submit" aria-label="average score"> <span ng hide="hideConditional()" class="font-white">score</span> <span ng-show= ...

When the Add button in AngularJS is clicked, a new popup page should appear by concealing the parent page

I am currently working on a project that involves using the AngularJS/Breeze framework within the HotTowel Template. One of the requirements I have is to include a button/link labeled "Add" on the parent.html page. When this button is clicked, it should t ...

What occurs when Click events are triggered on an <object> element?

I have set up a div, and inside that container, I embedded an SVG image using object (which I plan to manipulate later...). <div id="click-me"> some random Text <object data="some.svg" /> </div> Next, I added event listeners for t ...

Issues with Alignment of Navbar Elements in Bootstrap 3

When I test my website locally, the elements are aligned correctly as expected. However, when I view it on my live webpage, the elements are all left-aligned. I've attempted a solution from this source, but the issue persists. What confuses me is why ...

A guide on interpreting Ascii code within a character using PHP

String received in the following format solr/?key=color&facet=Blue%26keyword%3Dwoo Desired string format is as follows solr/?key=color&facet=Blue&keyword=woo ...

Having trouble with the ".." shorthand not working in the HTML image directory path

My Website File Structure: -css - home.css -html - index.html -images - banner.png HTML Code: <!DOCTYPE html> <html lang="en"> <head> <title>myWebsite</title> <link rel="stylesheet" typ ...

Is it possible to utilize AJAX requests in order to create a marker on google maps that updates in real-time?

My goal is to develop an app that generates a real-time updating google map, and I have been advised that AJAX requests can help achieve this. Nevertheless, after studying the documentation, I am uncertain about how to apply this method to solve my issue ...

Ways to apply CSS in jQuery using various combinators

I'm facing an issue with changing CSS using jQuery. The specific CSS line I want to modify is: .switch-vertical input ~ input:checked ~ .toggle-outside .toggle-inside { top: 40px; } My attempt at changing it looked like this: $('.switch-vertic ...

Eliminating a pattern with underscore.js or jquery - the complete guide

I am looking to remove the ellipses (...) from a value such as ...India. How can I achieve this using underscore.js, jQuery, or JavaScript? Any tips on how to accomplish this would be greatly appreciated! ...

PHP is having trouble updating the database when multiple radio buttons are selected. It appears that only the most recent radio button selected will be updated in the database

In my form, there are 2 numbers and 4 radio buttons for each. Only one option can be selected per number. When the form is submitted, only the database for question 2 will be updated. However, if question 2 is left blank, then question 1's database w ...

A white background emerges when I select md-dropdown

Lately, I've been experiencing an issue on my website where a white background pops up whenever I click on a dropdown (md-select) in my form. Initially, it only happened with forms inside a modal, but now it's affecting dropdowns across the entir ...

The CSS styles can vary depending on the web browser being used

Require assistance with my CSS. I designed an HTML/CSS widget on Blogger using my own expertise, but now facing some issues. The trouble arises with the image on the front left in the code. While it displays correctly on Google Chrome, aligned with the te ...

Adjust font size using jQuery to its maximum and minimum limits

My jQuery script enables me to adjust the font-size and line-height of my website's CSS. However, I want to restrict the increase size to three clicks and allow the decrease size only after the increase size link has been clicked - ensuring that the d ...

json_encode has stopped functioning (now)

Recently, I encountered a strange issue. I've been trying to display chart data, but the JSON_ENCODE function that is supposed to convert my data into JSON format is not returning anything. It was working fine before when I had less data, but now it&a ...

Guide to adding a Json file in a PHP file with PHP

I have a PHP file with an embedded JSON file, and I want to update the JSON file with new information from a form. The form looks like this: <form action="process.php" method="POST"> First name:<br> <input type="text" name="firstName"> ...

After the main page is loaded, the div will be dynamically populated with HTML content. How can we confirm that it has finished

I recently took over a project where a page loads and then code attached to that page populates a div with dynamically generated html – essentially filling an existing div with a string of html elements. Within this string are links to images, among oth ...

The VueJS Hello world application is experiencing technical difficulties and is currently not functioning as

As a complete VueJS newbie, I've just started working on my very first app. It's supposed to be a simple Hello World application, but unfortunately, the code isn't quite behaving as expected :( HTML <!DOCTYPE html> <html lang=" ...

Creating an internal link to navigate to a specific element ID within another Angular component

Seeking Solution I am facing a challenge in using an internal link within the <a> tag to navigate to a specific section of another component by HTML ID. My Exploration First, I visited this site: https://www.w3schools.com/html/html_links.asp bu ...

How to ensure MUI DataGrid fills the vertical space without any overflow issues

Trying to implement a MUI DataGrid within a Flexbox layout that fills the remaining space precisely can be quite challenging. Imagine a setup like this: --------------------------- | Header | --------------------------- | Table Header ...

Event follows activation of trigger click

I've already gone through this post on Stack Overflow about triggering an action after a click event, but none of the solutions I've tried so far have worked. Let's say I have a menu on my webpage like this: <ul class="nav nav-tabs"&g ...