Firefox displays a smaller right margin when using CSS layout in percentage units

As I work on scripting some CSS, I have come across a small challenge where the right margin seems smaller than the left one despite both being set at 5%!

This issue is occurring while using Firefox version 35.0.1.


body {
  width: 100%;
  padding: 0;
  margin-top: 5%;
  background: #fff;
}
#main-content {
  float: left;
  width: 57%;
  background: #a7cbd3;
  margin-left: 5%;
  min-height: 777px;
}
#side {
  float: right;
  width: 33%;
  background: #0081a9;
  margin-right: 5%;
  min-height: 777px;
}

Any suggestions or advice to fix this issue would be greatly appreciated!

Thank you for your help in advance!

htmlcsslayout

Answer №1

To prevent content overflow, it is necessary to reset the default body margin.

body {
  margin: 5% 0 0; /* added margin-top 5% as previous rule */
}


body {
  width: 100%;
  padding: 0;
  margin: 5% 0 0;
  background: #fff;
  margin: 0;
}
#main-content {
  float: left;
  width: 57%;
  background: #a7cbd3;
  margin-left: 5%;
  min-height: 777px;
}
#side {
  float: right;
  width: 33%;
  background: #0081a9;
  margin-right: 5%;
  min-height: 777px;
}
<html>

<head>
  <link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

<body>
  <div id="main-content">Main content</div>
  <div id="side">Side</div>
</body>

</html>

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 is the best way to dynamically display CSS code from a PHP variable without needing to refresh the

I am working on a page that utilizes ajax and PHP for all functions. Within the tab content, users have the option to select colors using color pickers. Once a user saves their chosen colors, I store the new CSS code in the database. The CSS code is as ...

phpcssajax

Changing the Color of Tooltips in Bootstrap 4

Currently, I am attempting to customize a Bootstrap 4 tooltip by re-styling it, but the original method no longer seems to be effective. My current approach looks like this: .tooltip-inner { background: #7abcff; background: -webkit-linear-gradien ...

csstooltiptwitter-bootstrap-4bootstrap-4

The code is slicing data, but the changes are not reflecting in the user interface

Initially, there are three drop down menus displayed. Upon selecting an option from the first drop down menu, the values in the second drop down menu load. After selecting an option from the second drop down menu, a new set of drop downs appears. However, ...

javascripthtmlreactjsreduxmaterial-ui

Issues with Converting JSON to HTML Table using JavaScript

Issues with Converting JSON to HTML Table Using JavaScript I've been trying to create a function that will display the contents of a JSON file in an HTML table. However, I keep getting an undefined error. Despite being able to see the data displayed ...

javascriptjqueryhtmljson

What is the best way to add two labels with a preferred size to a panel using the BorderLayout manager in Java

I'm facing an issue while trying to add labels to the north and south of a panel and center it within my frame. When I manually specify the size of the labels using: label.setPreferredSize(di); label2.setPreferredSize(di); things start to get messy! ...

javaswinglayoutjlabelborder-layout

Enhancing Your Website with Multiple Background Images in CSS3

Having trouble understanding how to position multiple background images with CSS3. I'm struggling to get them to display at the top, middle, and bottom of the page. Can you help me figure out how to make an image appear at different positions using a ...

htmlcss

When using JavaScript to style.display = "block", the Bootstrap-4 column layout may experience a display break

My div is initially displaying properly in one row at the beginning. However, when the user changes the select option to "b" and then back to "a," the display breaks. The two texts "my left side text" and "my right text" are displayed on two lines, one be ...

javascripthtmljquerybootstrap-4

A guide on choosing a custom button color and automatically reverting to its original color when another button is clicked

I have a collection of 24 buttons, all in a dark grey (#333333) shade. Whenever I click on one of the buttons, it changes to a vibrant blue color (#0099ff), which is functioning correctly. However, when I proceed to click on another button, the previous ...

javascriptphphtmlcss

The iPhone has a unique feature that allows users to scroll through images horizontally,

Is it possible to create an HTML div container with some CSS tricks that can display a horizontal scrollbar similar to the one seen on iTunes preview screenshots, specifically for Safari on iPhone? For example: I am looking to use this feature to showcas ...

iphonehtmlcssuiwebview

Creating HTML Divs with Equal Heights

I have written this JavaScript code, but I feel like there might be some redundancy. Does anyone have suggestions on how to improve and optimize this code? var boxHeights = []; $('.box').each(function() { boxHeights.push( $(this).outerHeight ...

javascriptjqueryhtmlcss

Animating a div in jQuery by creating a duplicate

I've spent hours scouring Google and StackOverflow for a solution to this particular issue I'm facing, but haven't been able to find one. Here's the problem: I'm currently in the process of creating a shopping website. When a user ...

javascriptjqueryhtmlcss

Older versions of Firefox are unable to detect a link that has been registered by the Vue event handler

Here is the HTML code that I am working with: <button id="btncontinue" ref="btncontinue" v-on:click="oncontinueclick" v-show="continuevisible"> <i class="fa fa-arrow-alt-circle-right fa-2x continue-icon" v-show="continuevisible"></i> &l ...

javascripthtmlvue.jsfirefox

Retain values of JavaScript variables acquired by their IDs even after a page refresh

I have a JavaScript function that retrieves HTML input values and inserts them into a table. However, when I refresh the page, those values are reset to null. How can I prevent this and keep the values visible after a refresh? I believe setting and getting ...

javascripthtml

What criteria does the browser use to select the media type for filtering CSS links?

One of the pages on my website includes a link to a stylesheet specifically for printing purposes. <link rel="stylesheet" href="../print.css" type="text/css" media="print" /> While most browsers ignore this link and its styles when rendering for sc ...

cssinternet-explorer-7media

Utilize jQuery to retrieve data attributes and set them as CSS properties in a key-value format

Looking at the HTML below: <h4 data-padding-top="100" data-padding-left="0" data-text-align="left" data-color="#ffffff">Promotion Two</h4> I aim to use the data attributes as CSS styles for the H4 element. I have attempted to achieve this ...

jquerycsskeyvaluepair

Adjusting an image size using JQuery after resizing a canvas will only resize the image itself, not

How can I resize an image within a canvas using JQuery in a way that only the image is resized, not the entire canvas? function resizeImage(width, height){ var image = document.getElementById('resizeImage'), canvas = document.createEleme ...

javascriptjqueryhtmlcsscanvas

Optimizing Mobile Content Alignment in Columns Using Bootstrap

I've been tackling the challenge of creating a mobile-optimized website with the latest Bootstrap grid system. My goal is to have two columns side-by-side in medium and large screens, but stacked on top of each other in extra-small and small screens. ...

htmlcsstwitter-bootstrap

Having trouble with Bootstrap form-inline stacking issue, any tips on how to stop them from stacking?

I've created a simple test navbar with a search input box and search button using the Bootstrap class form-inline. However, the search button is appearing below the search input, even though there is enough space available. You can view the codepen he ...

htmlcssbootstrap-4navbarbootstrap-5

Preventing users from entering past dates in Angular 6 - A step-by-step guide

Here is my current code snippet: ngOnInit() { let now = new Date(); this.date = formatDate(now, "dd/mm/yyyy",'en-US'); console.log("dateFormat :",this.date); } This is the html part of my code: <input type="date" [min]={{da ...

htmlangulardateangular6

A step-by-step guide to implementing Google Analytics Event tracking using PHP

Implementing Google Analytics Events in Javascript can be done using the following code: ga('send', 'event', 'test', 'test','value'); I am trying to incorporate this feature throughout my entire project. ...

javascriptphphtmlgoogle-analytics