Why are my Chrome Div regions failing to expand to their full width?

I have been searching but couldn't find an answer to my issue, so I apologize if this question has been asked before. I am working on a simple site layout and noticed that two of the div regions do not expand fully in Chrome, however, they do in Firefox and IE. These two divs contain tables - could this be causing the problem?

Here is a comparison image showing the gaps in the top and bottom footer div when viewed in Chrome:

Below is the CSS for the two regions:

.topbar{
    margin: 0;  <---Added this in hopes to fix it.
    width:76%;
    height: 34px;
    background-image:url('img/topImgBg.png');
    background-repeat:repeat-x;
    padding-left: 12%;
    padding-right: 12%; 
    color:white;
    font-size:12px;
    text-align:right;
}

.footer{
    height:15%;
    width:76%;
    padding-left:12%;
    padding-right:12%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A1A1A1', endColorstr='#ffffff'); 
    background: -webkit-gradient(linear, left top, left bottom, from(#A1A1A1), to(#ffffff)); 
    background: -moz-linear-gradient(top,  #A1A1A1,  #ffffff);
}

And here is the body CSS:

html, body {    
    margin: 0; 
    padding: 0;
    width: 100%; 
    min-width:1024px;
    font-family:Verdana;
    font-size:14px;
}

Thank you in advance.

Answer №1

The width is currently set to 76%, with left and right padding also in percentages. The difference in rounding between browsers may be causing the gap you are seeing.

If you make small adjustments to the browser width, you may notice the gap changing slightly.

Consider removing the width property altogether and keeping the padding as it is now. This could potentially resolve the issue.

Answer №2

If you designate the parent container as

display: table;

and specify the child blocks with

display: table-cell;

Chrome will accurately calculate percentages (as long as they total up to 100%). For instance:

<ul>
    <li class="forty">asdf
    <li class="forty">asdf
    <li class="twenty">asdf
</ul>

<style>
    ul { display: table; width: 100%; list-style: none; margin: 0; padding: 0; }
    li.forty { display: table-cell; width: 40%; }
    li.twenty { display: table-cell; width: 20%; }
</style>

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

Can applications on Windows 8 operate using JavaScript, HTML5, and CSS3 that adhere to industry standards?

As a .NET developer, I tuned in to the keynote for the Build Event in Anaheim, California and had some questions regarding the new support for creating Windows 8 applications using JavaScript, HTML5, and CSS3. They showcased several examples and mentioned ...

Is it achievable to create shadows that do not overlap?

When you hover your mouse over the pill-shaped object, it should smoothly move over the circle as desired. However, the shadow of the circle still remains visible creating an unwanted effect. I am looking for a solution where the shadows do not overlap but ...

Displaying a particular form depending on user selection in PHP

Being new to the world of HTML and PHP, I have a question. In my HTML code, there is a form with two options to select from: lesson or topic. I want to display a different form depending on whether the user selects "lesson" or "topic." How can I achieve ...

Adjust the placement of the outcome on the table using PHP

I am attempting to display 7 results in a table (image 1) and need to adjust their positioning. In the array, Mon = 1 and Sun = 7. Where there are no values, I want them to display as $0. However, I am struggling to move them to the correct spot on the ta ...

Adsense Responsive Ads by Google Are Not Displaying

Click on this link to see 3 different types of ads - Right, Left, and Header Ads. These ads are supposed to be responsive and have an "Active" status. However, the issue is that the Responsive ads are not displaying properly. After some research, it seems ...

The CSS @media query is failing to function properly

I'm currently developing a web application similar to Spotify for my personal use, but I'm running into some issues with the @media query as it doesn't seem to be working correctly. Here is the CSS code: /* Screen Adapting */ @media (height ...

No results found for the xpath within the <p> tag

I'm currently using selenium.webdriver chrome to scrape data from my website, and I need to extract the location details of visitors. Although I have successfully identified the <p> tag that contains 'location', it is returning None. ...

Uploading Blobs using JavaScript and FormData

Currently, I'm encountering an issue with uploading a blob generated in JavaScript to my server. The main concept involves a user uploading an image, which is then center cropped and downsampled using JavaScript before being transmitted. Although the ...

Build a table with consistent columns and flexible rows utilizing CSS and HTML

Just starting out with CSS/HTML and looking for guidance on creating a table with a variable number of rows. Any tips on how to achieve this using CSS? I'm aiming to replicate a table with a similar structure, but struggling to figure out how to defin ...

CSS Flexbox with 3 columns and a grid layout of 4 by 4, with one large item included

I am currently exploring how to implement this layout using Flexbox. So far, I have only managed to come up with the following code snippet: Is there a way to achieve this purely through CSS without altering the HTML structure, considering it is generated ...

Assign a value to a jQuery variable from user input

Can someone assist me in setting an input field to the value of a jQuery variable? I am encountering difficulties with this task. My aim is to have equipment failure counts appear in an input textbox so that I can later write the value back to a table. Eac ...

Add CSS styling to a section of a canvas

I want to use a specific cursor png for just a portion of a canvas. Currently, I have code that applies the cursor to the entire canvas like so: .myClass { cursor: url('../img/myCursor.png') 7 33, auto; /* img hotspot centred*/ } However, I ...

The JQuery UI datepicker is constantly popping open

On my website, I have implemented a JQuery UI date and time picker in a form. Users can select the date, time, and provide additional information. However, whenever the user clicks on the text input for additional information, the date and time picker pop- ...

Bootstrap link causing alterations to my CSS code

After incorporating Bootstrap into my HTML, I noticed that it caused some unexpected changes to my CSS code. Original CSS: https://i.stack.imgur.com/EsE6J.jpg Modified CSS after applying Bootstrap: https://i.stack.imgur.com/yH1r9.jpg Link to Bootstrap ...

Issue with Angular uploading a file and sending it as a POST request causing errors

I am currently working on an HTML form that allows users to upload files from the front-end to the back-end and perform various operations on them: <button mat-raised-button color="primary" type="button" style='margin-right:20px ...

What is the best way to customize the appearance of only one of two identical tables using HTML and CSS?

I have two tables that look identical: <html> <head> <style> td, th { text-align: left; padding: 28px; } </style> </head> <body> <table> <tr> ...

Capybara - Navigating a page by clicking on a link related to another value

I'm currently facing a challenge in locating and selecting a particular link on a web page. All links within an HTML table contain the term 'Edit' (it's a link for editing configuration settings). However, the exact link changes depend ...

Showing small previews of images using php

I'm struggling with getting linked images to display. The code I have is currently located in a .php file. Its purpose is to retrieve all images from the directory where the file resides and show them using a "for" loop. However, at the moment, it onl ...

Retrieve data from an API and store it in a JSON array

My website is having an issue where it's fetching data from an API and displaying it in a table, but all the cells are returning undefined values. The data in the API is structured as an array with multiple datasets inside curly braces that I am unsu ...

What is the method for executing a server-side script without it being transmitted to the browser in any way?

Although the title may be misleading, my goal is to have my website execute a php file on the server side using arguments extracted from the html code. For example: document.getElementById("example").value; I want to run this operation on the se ...