The clearing issue with floating divs in IE6 is not being resolved accurately

I am attempting to create a 2-column layout using floated elements:

<ul>
  <li class="odd">Content for the left column</li>
  <li class="even">Content for the right column</li>
  <li class="odd">Additional content for the left column</li>
  <li class="even">Additional content for the right column</li>
  <li class="odd">More content for the left column</li>
  <li class="even">More content for the right column</li>
</ul>

CSS:

ul { 
    margin: 20px 0px; 
    width: 880px;
}

li {
    position: relative;
    float: left;
    width: 410px;
    margin: 0px 0px 10px 0px;
    padding: 0;
}

.odd { clear: left; }

.even {
    clear: right;
    margin-left: 50px;
}

Check out this JSFiddle

While this setup works well, I have encountered an issue with Internet Explorer 6 where the even elements do not clear and end up horizontally stacked on the first row. How can I resolve this problem?

htmlcssinternet-explorer-6cross-browser

Answer №1

Consider setting the elements to be 50% width of the container and floating them all to the left. This will cause each element to float next to the last until there are 2 elements, at which point the next one will appear on a new row.

ul { 
    width: 880px;
    overflow:hidden; /* clear */
}

li {
    float: left;
    width: 50%;
}

Answer №2

This is my approach, inspired by errkk's response with a few adjustments. I will acknowledge his contribution as the accepted solution.

li { width: 48%; }

.odd { clear: both; }

.even { margin-left: 4%; }

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

Increase ng-grid row height dynamically based on content without any external plugins or reliance on jQuery

I came across a similar question on this topic at Angular ng-grid row height However, none of the solutions provided there meet my requirements. If I use CSS to fix the issue, it impacts the page's responsiveness and disrupts ng-grid's header fu ...

javascriptcssangularjsng-gridrow-height

Resolve Bootstrap columns with varying heights

My Bootstrap row contains a variable number of columns determined by a CMS, sometimes exceeding the space available on one line. I am looking for a way to neatly display all the columns with equal heights. <div class='row'> <div cl ...

jquerycsstwitter-bootstrapresponsive-design

Tips on transferring information from AngularJS to a remote server using ngResource

Looking for guidance on utilizing the ngResource module? To send data to a server. To retrieve data from a server. I am attempting to send data to a Solr server. Utilizing AngularJS API. Using npm package manager to install packages to my application. Th ...

javascripthtmlangularjs

How to Make a Doughnut Chart Using CSS

For a while now, I've been working on filling in 72% of a circle with a hole cut out of the middle. Throughout this process, I have been consulting different resources - like this method for calculating and this one for other aspects. However, I’ve ...

htmlcsssvgpathdonut-chart

The HTML5 Canvas ellipse with a thick line width is displaying a quirky blank space

I am currently working on a drawing application using HTML5 canvas. Users have the ability to draw ellipses and choose both line and fill colors, including transparent options. Everything works smoothly when non-transparent colors are selected. However, ...

javascripthtmlhtml5-canvas

Adding CSS styles to a pre-existing table structured like a tree

Can a CSS style be applied to a pre-existing HTML table structured as a tree? For instance, in Firefox, the Bookmarks Library table is set up as a tree. Is it feasible to add a CSS style to one specific column without affecting the others? While using tr ...

htmlcssfirefox

Is there a way for me to choose every element excluding those contained within a specific div?

Check out my code snippet: <div class="car"> <div class="make">NISSAN</div> <div class="model">MICRA</div> </div> <div class="discontinued"> <div class="car"> <div class="make">FOR ...

htmlcsscss-selectors

Angular 4 Placeholder Feature with Bootstrap 4

I created a Select with dynamic values using the ngModel directive and the Bootstrap Framework, and it's working. However, I am facing an issue where I want to add a placeholder, but the ng directive is causing it not to work. Below is my current cod ...

htmlangularbootstrap-4

Ensuring IconButton is perfectly aligned with Text in one straight line

I want to display IconButtons alongside plain text in a single block of text, but the result didn't turn out as I had hoped. Here is what I attempted: JS(ReactJS): <div> <span> <h3>Title</h3> <IconButton className ...

cssreactjsmaterial-uifrontend

Adding input values to a jQuery Ajax POST request

I am currently attempting to send form values to a remote API using AJAX. The necessary information I require from the HTML form element includes the author, string, false, and true. At the moment, I have hard-coded some values but... function sendData ...

javascriptjqueryhtmlajax

Centering an icon vertically and introducing animation upon hovering over an image

I'm having difficulty with vertically centering an icon that drops down on image hover, and I want to make its transition smoother. Currently, it's dropping down too abruptly and no matter what transition property I apply (ease, ease-out, etc.), ...

htmlcsspositioncss-transitions

What is the best way to conceal the blackberry cursor in a web browser?

Is there a way to conceal the blackberry cursor while browsing on the browser? Perhaps through Javascript or CSS? I am attempting to replicate the functionality found in native apps where users can flick through items with their finger. I find this featur ...

javascriptcssblackberrycursor

Unable to retrieve data from Flask for AJAX request

When making an AJAX call to a Flask function to retrieve data using a token, the code looks like this: @app.route("/questgen/results", methods = ['POST', 'GET']) def fetch_results(): token = request.form.get('token&a ...

pythonhtmlajaxsqlite

How to Print a Web Page in ASP.NET Without Header and Footer

Is there a way to Print a Web Page on Asp.Net without including the Header and Footer? ...

asp.nethtmlcssprinting

Retrieve all colors from the style attribute

I'm on the hunt for a method to extract all CSS colors from a website. Currently, I have been able to manage internal and external stylesheets by utilizing document.styleSheets. However, my issue lies in the fact that any styles directly assigned to a ...

javascriptjqueryhtmlcss

Having trouble getting buttons to wrap onto a new line instead of spilling over the container

Struggling with getting a JSFiddle to work properly with React and other dependencies, I've decided to share the Github repo link to demonstrate the issue: https://github.com/ishraqiyun77/button-issues/ The main problem arises when a group of button ...

cssreactjstwitter-bootstrapbuttonbootstrap-4

Tips for truncating a long string on Firefox for a responsive design

Can someone help me figure out how to display a 2-line image text below? Sample Image This is what it looks like in Chrome, but unfortunately, it doesn't work in Firefox. I came across a website that has a tutorial for Chrome: https://css-tricks.com/ ...

javascriptjqueryhtmlcss

Hovering over a thumbnail image triggers a popup in CSS3 or Jquery

Looking to showcase a collection of thumbnail images on a webpage with specific height and width dimensions? Wanting to implement a hover effect that displays a larger image in a fixed position within the wrapper at coordinates top:50px and left:50px? The ...

javascriptjquerycsspopup

What is the best way to achieve a sophisticated layout using the flex grid in CSS3?

Looking to achieve a responsive layout using flex without the need for media queries. Can anyone provide the CSS code for a layout using flex or grid? I've attempted the following: .parent { display: flex; flex-wrap: wrap; height: 100vh; } ...

htmlcssnext.js

Adjusting iframe height based on content in ReactJS

When tackling this problem in a React environment, the traditional solution falls short due to the dynamic component structure and event model: script: <script> function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.s ...

javascriptcssreactjsiframereactive-programming