The positioning and floating of two divs are set to fixed without using percentage width, however, the functionality is not

Apologies for my poor English writing :) I am attempting to float two divs side by side in a fixed position, without using percentages. This code works well on most browsers but is not compatible with IE 6.

HTML

<div class="right"></div>
<div class="top"></div>
<div class="main">
   <div class="content"></div>
</div>

CSS

body {
 margin-top: 0;
 padding: 0;
 width: 100%;
 height: 100%;
 position: relative;
} 
.right {
  width: 200px;
  height: 100%;
  float: right;
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #ccc;
  z-index: 5;
}
.main {
  position: fixed;
  float: right;
  height: 100%;
  right: 200px;
  left: 0;
  bottom: 0;
  top: 50px;
  background-color: red;
  display: inline;
  z-index: 1;
}
.top {
  position: fixed;
  float: right;
  right: 200px;
  left: 0;
  bottom: 0;
  top: 0px;
  background-color: yellow;
  clear: left;
}

Answer №1

If you're dealing with the double margin on float issue in IE 6, check out this explanation here:

Additionally, try adding:

display: inline;

to your floated elements to resolve the problem.

Furthermore, I noticed that you are using both floats and position: fixed in your code. You may want to consider removing all floats entirely as a solution without affecting the layout.

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

Expansive Carousel Feature with Ng Bootstrap

In my Angular 5 application, I am utilizing the Carousel component from "@ng-bootstrap/ng-bootstrap": "^1.1.2". I am trying to display pictures in full screen but when I press F11, the image appears like this. I am unsure of which CSS properties to apply ...

The art of uploading images with HTML and CSS

Looking for guidance on how to convert this image bubble so that users can upload their images during account creation. When the user hovers over the image bubble, it should display "Upload profile image" and prompt them to upload an image upon clicking. A ...

Utilize JavaScript to target the specific CSS class

Hello, I am currently using inline JS in my Wordpress navigation menu, redirecting users to a login page when clicked. However, I have been advised to use a regular menu item with a specific class and then target that class with JS instead. Despite searchi ...

Why doesn't the Kellum method for CSS image replacement work with button elements?

Recently, I discovered that the kellum method doesn't work as effectively with HTML button elements. Specifically, it does work but requires additional text indent. To sum it up, here is the technique: text-indent: 100%; white-space: nowrap; overflow ...

Ways to modify the color of every appearance of a term in an html grid using css

My HTML code includes an AngularJS table as shown below: <table id="searchTable"> <thead> <tr> <th>Index</th> <th>Observation</th> <th>Reported By</th> ...

The website lacks accessibility features such as a text size swapper, but the contrast swapper is not functioning properly

As I embark on my first website project that requires accessibility controls, I find myself in need of the ability to adjust text size and contrast settings. Specifically, I want to offer options for small, default, and large text sizes as well as normal, ...

JavaScript: The functionality of calling functions through buttons ceases to function once the page is updated without reloading

I am trying to create a program that consists of one HTML page, where I can dynamically update and populate it with different elements using JavaScript. The main feature of the program is a button that remains constant in every version and displays a mod ...

What are the necessary steps for incorporating Payment/Bank transactions into an e-commerce platform?

Right now, I'm utilizing HTML, CSS, jQuery, and some JavaScript to develop a website. As I work on creating the store section, I find myself unsure of how to incorporate payment methods and all related features. Are there any free "pre-built" systems ...

Looking to verify a disabled select element and adjust the opacity of that element when it is disabled

$_product = $this->getProduct(); $_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes()); ?> <?php if ($_product->isSaleable() && count($_attributes)):?> <dl> <?php foreach($_attrib ...

Improper CSS styling leading to incorrect image size

I've got this awesome parallax image on my website (the majestic nature one) Here's how the page looks normally But sadly, it's not properly sized. When I check in Chrome dev tools, it appears like the image below, which is how I want it to ...

``There seems to be an issue with the alignment and vertical placement in both Firefox and IE

I'm currently working on a responsive landing page for a company and running into an issue with the CTA button's position outside of Chrome. It's functioning perfectly in Chrome, resizing as intended: Here is the CSS responsible for this: ...

Designing Post Archive with Flexbox to create dynamic layouts

I am currently exploring different techniques to style my columns, and I have encountered an issue where if there are less than 4 posts in a row, there is extra space between each post. While I understand that floats can resolve this problem, I am searchin ...

Develop an XML document that includes CSS and DTD seamlessly incorporated

Could someone please provide me with a short code example of an XML file that includes both a DTD and CSS styles all in one file? Just need one element as an example. I'm new to XML and can't seem to find any examples with both XML and CSS comb ...

Creating a card design that responds to user interactions using CSS and HTML

I attempted to create a responsive queue of playing cards that adjusts based on the display width. I want this queue to perfectly fit the display width so that no card is cut off. It should be optimized for phones, tablets, and desktop screens. Additiona ...

Creating a bottom bar using React and Material UI

I'm currently working on implementing a footer that will be displayed on every page of my Next.js application. To style this, I am utilizing Material UI. The following component is responsible for defining the layout across all pages of the app: impo ...

Stop the click event using a confirmation dialog before proceeding with the operation

I'm trying to implement a confirmation dialog before deletion by using e.preventDefault() to prevent immediate deletion. However, I am facing an issue in the YES function where I would like to resume the click event's operation with return true w ...

Adding a border to the input field in Bootstrap for enhanced styling and visibility

Looking to replicate the border style on an input element as shown in this image: The current code I have is producing a different result. Can anyone assist me in achieving the desired border style? <!DOCTYPE html> <html lang="en"> <head ...

CSS - Layering new DIVs over existing DIVs

My goal is to implement "vertical-align: bottom;" in order for the DIVs to align from the bottom of the wrapper/parent DIV to the top. However, I am facing an issue where I want the first DIVs to be displayed at the bottom, rather than at the default top p ...

problem when trying to establish the minimum height for a div element prior to the website being fully loaded, considering the

Having trouble with a CSS issue that seems simple but I can't find a solution for. I have a main div with a min-height set to a certain value, specified in %. Since there is no outer div, the min-height won't display if it's given in px. I ...

CSS styles are not being displayed on elements that have been dynamically added using jQuery

I have searched through similar questions, but none of them addressed my issue. (they all seemed to be related to typos) This is just for fun. I am trying to create a table using jQuery based on JSON data. The problem is that the appended table rows do no ...