Web browsers disregard div width in Internet Explorer

Hi everyone, I'm encountering an issue. I'm attempting to create a website with three columns that resembles a flyer.

It displays correctly in Firefox, but in Internet Explorer (version 7 on my computer), the width of the middle column is not being recognized.

Below is the code:

</html>

<head>

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

</head>

<body>
</div>
<div id="main">

<div id="row">

<div id ="column" style="float:left;">

</div>

<div id ="column" style="float:right;">

</div>

<div id ="column" style="margin: 0% 0% 0% 35%;">

</div>

<div id="row">

<div id ="column" style="float:left;">

</div>

<div id ="column" style="float:right;">

</div>

<div id ="column" style="margin: 0% 0% 0% 35%;">

</div>


</div>



</div>

</body>

</html>

and here is the css:

div#column {
border-style:solid;
border-width:5px;

float: top;
text-align: justify;

padding: 2em;
min-width: 16em; /* Minimum width (of heading) prevents display errors in modern browsers */
height:97%;
width:25%;
background-color: #ffefd5;

}

div#row {
border-style:solid;
border-width:5px;
margin: 5% 5% 5% 5%;

text-align: justify;

padding: 2em;
min-width: 16em; /* Minimum width (of heading) prevents display errors in modern browsers */
height:200em;
background-color: #ffefd5;

}

div#main {
float: top;
text-align: justify;

padding: 2em;
min-width: 16em; /* Minimum width (of heading) prevents display errors in modern browsers */


}

Answer №1

When looking at your middle column, div#main, it appears that there is no specific width set in the styles. Instead, there is only a min-width. However, this can cause some issues with IE7, as it has trouble with min-width. To learn more about this, you can check out this resource.

UPDATE:

Upon further inspection of the code provided, it seems like the problem lies in the values of the width and margin properties on the column divs. The calculation shows that the total width exceeds 100%, resulting from each column having a width of 25% times 3 plus a margin of 35%.

Another issue to note is that all three columns have been assigned the same ID, which should be unique for each element. If you intend to apply the same styling to multiple elements, consider using a class instead. Simply change #column to .column in the CSS and update the HTML to use class="column" instead of id="column".

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

Is there a way to update the content of both spans within a button component that is styled using styled-components in React?

I am interested in creating a unique button component using HTML code like the following: <button class="button_57" role="button"> <span class="text">Button</span> <span>Alternate text</span> ...

What is the best way to save multiple HTML widgets in my HTML file using R and plot.ly?

I have recently started experimenting with plot.ly in R and I am fascinated by the ability to easily publish graphs directly in html using htmlwidgets. However, I have encountered a challenge when trying to save multiple widgets in the same html file. Curr ...

Creating a dynamic overlapping image effect with CSS and JavaScript

My fullwidth div has an image that overlaps it. When the browser is resized, more of the image is either shown or hidden without resizing the actual image itself. I managed to get this effect for the width, but how can I achieve the same result for the hei ...

creating an identical copy of a dynamic element's size

I am currently working on a project using react js where I need to incorporate multiple images. My goal is to have standard background divs / rectangles that match the exact size of each image, allowing for animations to be performed on top of them. The sn ...

The screen-responsive navigation bar is experiencing functionality issues

I am facing an issue with my navigation bar on both desktop and mobile. When I maximize the window while the mobile navbar is open, it disappears as expected but the desktop navbar does not appear. I am using a bootstrap template and I am unsure if solving ...

How to target the following element with CSS that has a specified class name

Would it be possible to achieve this using CSS alone, or would I need to resort to jQuery? This is how my code currently looks: <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr class="some-class">...</tr> // My g ...

Hover over, enter the mouse

On my FAQ and Question page, I want the answer to a question to be shown when a user hovers over it. However, currently all the answers are displayed when hovering over any question. This is not the intended functionality - only the answer to the selected ...

Conversation taking place outside of an iframe

Having a slight issue with a JavaScript dialog. There's a button and a dialog inside an iframe with the following code: $( "#correcto" ).dialog({ width: 600, closeOnEscape: true, autoOpen: false, draggable: false, modal: true, ...

Retrieving an image from an input file and setting it as the background of a div element

I am currently developing a whack the mole game using Vanilla JS, and I'm attempting to allow players to choose their own target by uploading an image file. However, despite days of searching for a solution, I have not been successful. HTML: <inpu ...

Expanding divisions vertically without the constraints of fixed heights

Instead of resorting to fixed heights and absolute positioning with top: and bottom:, I'm challenging myself to find a CSS solution without using those methods. I want to explore different ways to solve this problem and enhance my skills. I have a st ...

Issue with Bootstrap carousel control not switching back to the previous slide

Interestingly, the carousel is functioning for sliding to the next slide but not for going back to the previous one. I'm still getting the hang of jsfiddle, as you can see, highlighting works for the next slide but not for the previous. Check out the ...

Is it possible to navigate to specific sections on a one-page website with an offset?

Creating a single page navigation with automatic active classes and smooth scroll is functioning properly, but I encountered an issue where the fixed navigation covers my headings slightly after scrolling. To address this problem, I included 'top - 7 ...

Use the resizable function for widths greater than 1024px

I have a resizable function on my page: $(function() { $( "#droppable" ).droppable({ create: function( event, ui ) {$( this ).hide(0)} }); $( "#droppable" ).on( "dropover", function( event, ui ) { $( this ) $( this ).text('¿Eliminar?&apo ...

Tips for linking a CSS file in a Wordpress child theme stored in a separate directory with a unique filename

I'm seeking clarification on a common WordPress practice. When working with child themes, the style.css file is typically located in the root folder of the theme. In my functions.php file, I have been using the following code: <?php add_action( & ...

Retrieving details of a row in Codeigniter using a link with a foreach loop

After nearly a month of trying, I am still unable to figure out how to extract the "details" for each row from my table in the view. The table is populated using a foreach loop and I want to display these details on another page when clicking the link labe ...

Retrieve information from specific dates by using a datepicker tool

Hey there, I'm trying to implement a datepicker calendar that allows me to select two dates and then click a button to display all the data between those dates. Here is my code snippet... <?php include_once 'header.php'; $con = mysqli_ ...

Glitchy/Crazy CSS3 Animations

Currently, I am developing a website at . One of the features I have implemented is CSS3 transitions for route changes, but this feature only works in Chrome. Here's how the animation works: I apply the .preanimate class to rotate the phasing out di ...

Error: The value being evaluated in document.getElementById(x).style is not an object and is not supported

Desired Outcome for my Javascript: I am working with a div that includes an "onmouseover='getPosition(x)'" attribute which can be dynamically added and removed through my javascript by clicking a specific button. The function 'getPosition() ...

What is the method for rearranging the order of Bootstrap 5 columns within nested elements without using hidden duplicates?

This snippet of code is designed to show blocks in different ways on mobile and desktop devices. <div class="col-12 col-sm-6 order-sm-1">TITLE</div> <div class="col-12 col-sm-6 order-sm-0">IMAGE</div> <div cla ...

Steps for activating all iframes on an HTML page

Seeking a solution to enable all iframes on my webpage without encountering the 'refused to connect' error. Is it feasible with the implementation of a meta tag? If yes, could someone provide a code snippet for reference? ...