Looking for a comprehensive guide on multi-column programming options?

After reviewing information from source1 and source2, it appears that IE9 will not support multi-column CSS3. Since IE9 is still the most popular browser (which I find puzzling), I am left with no choice but to utilize Programming Power to implement multi-columns.

Currently, I have three divs floating to the left, each manually filled with text. I know this may seem archaic, but my goal is to streamline the process by having a single uninterrupted piece of text contained within one div, with a 

program capable of dividing it into X equally wide columns
.

Question: Before I embark on reinventing the wheel, are there any programming techniques you are aware of that elegantly address this issue? Please provide recommendations for effective multi-column layout solutions so I can assess which option is optimal (I will update the table below accordingly).

Exploring all possibilities in 2011 and beyond to enhance the user experience for multi-column text:


Language    Author         SourceCodeUsage                WorksOnAllMajorBrowser?
=================================================================================
html        manual labour  put text manually in separate left-floating divs   "Y"
// Upside: control! Downside: few changes necessitates to reflow 3 divs manually!

CSS3        w3c            css3.info/preview/multi-column-layout/             "N"
// {-moz-column-count: 3; -webkit-column-count: 3; } That's all!

javascript  a list apart   will add url soon                                   ?
// 

php         ?              ?                                                   ?
//
layoutcss

Answer №1

Recently, I encountered an issue with a work project that required me to find a solution.

  1. Initially, I turned to CSS for help, but found limited support.
  2. Next, I explored the option of using JavaScript to evenly distribute content across columns.
  3. However, I ultimately opted for a server-side or manual column setup for a more reliable and well-supported solution.

In my specific case, I needed two columns and was storing each one separately in a database. For your situation, I recommend simply dividing the text into two halves based on word count.

For a more precise approach, consider determining the midpoint based on characters and placing the next word at the beginning of the second column (if using two columns). This method can help achieve better balance between the columns.

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

Using HTML to place an image tag close to an input element

I'm experiencing a strange issue where adding an img tag alongside an input and a span causes the input and span to shift downwards. <div> <span>Credit Points</span> <input type="text" name="credit_points" value="2.25"/> ...

htmlcss

Optimal methods for organizing various perspectives on a one-page website

I am developing an application that incorporates AngularJS and Bootstrap. The current setup involves organizing various views using ng-show, allowing for view changes based on button interactions and the enablement/disabling of ng-show values. Within a si ...

javascripthtmlcssangularjssingle-page-application

Creating columns of equal height using Bootstrap 3 and flexbox

Working with Bootstrap 3 (unable to switch to Bootstrap 4) and looking to achieve the same-height columns effect as shown in the image: https://i.sstatic.net/WR55a.jpg Managed to get it done using position absolute and @media screen for image size and padd ...

htmlcsstwitter-bootstrap-3flexboxdisplay

Problem with loading images from class in IE7

Encountering issues with IE7 and images in my CSS. .dot-preview { background: url("../images/bola02.png") no-repeat scroll 0 0 transparent; display: block; height: 12px; margin: 3px; width: 13px; } .navi-active .dot-preview { back ...

htmlcssinternet-explorer

CSS Element Overlapping Issue in Safari Browser

I am currently developing an audio player for my application that includes a pause/play button, next button, and back button. I have encountered a problem specifically on Safari where the back/pause buttons are overlapping each other. The play/pause button ...

javascripthtmlcssnext.js

The most effective way to code overlapping html buttons

Can you help me figure out how to make clickable areas on my HTML5 web page without them overlapping? Here's what I'm trying to do: I want the red, blue, and green areas to be clickable links, but not overlap. For example, when clicking on the f ...

javascriptjqueryhtmlcsssvg

The resizing of the background image is contingent upon the size of the

I am facing an issue with my bootstrap carousel. One of the items only contains a background image without any content. I have set a height for it so that it is still visible even without content. However, when viewing on mobile devices, I can only see a p ...

jqueryhtmlcsstwitter-bootstrap

Two divs in the same body are overlapping each other

My website is located at: this link When you click on "teamchart" in the navigation bar, it takes you to that section. The issue I'm facing is that the teamchart section is overlapping with the contact section. How can I align the chart and have the ...

javascriptjqueryhtmlcsstwitter-bootstrap

Formatting won't assist in aligning Facebook button

I am currently working on a page that includes a div with a Facebook recommend button. In order to style the Facebook code, I enclosed it with this formatting: <div style="align:center"> <div id="fb-root"></div> <script src=" ...

htmlcss

Is it possible to automatically collapse the Bootstrap navbar when the viewport is not wide enough?

Currently, my navbar is styled with a "shrinkwrap" background to match the width of the content: <nav class="navbar fw-bold h5 rounded-5 navbar-expand d-inline-flex"> <div class="container-fluid"> ...

htmlcsstwitter-bootstrapbootstrap-5

Utilize Rails file_field input as a clickable button

Currently, I have a button that needs to trigger the action associated with a file_field in my Rails application. Below is the erb code I am using: <label for='file-input'> <span class='btn btn-success' style='max-width ...

cssruby-on-railsrubyerb

The phone number is not able to be clicked on

I have a phone number included in my markup that I would like to make clickable. Here is the code snippet: <h3 class="footer">Need assistance? Call <a href="tel:+180006XXXX">1800 06X XXX</a></h3> However, upon running this code, I ...

htmlcss

Toggle class on element based on presence of class on another element

If I have 4 boxes and the user is required to choose one. I aim to assign an active class to the box that the user clicks on. However, if the user selects another box, I want to remove the class from the first clicked box and apply it to the newly clicked ...

javascripthtmlcss

I require help with my digital greeting card

Apologies for any language errors in advance. I'm almost done with my first "online-card" project, but I've hit a frustrating issue. I can't seem to remove the gap between the footer and the tab-content (the Hungarian version is fine). I&apo ...

twitter-bootstrapcssflexboxbootstrap-4

Fluid and static containers in Bootstrap offer flexible and fixed-width layout

I am experimenting with combining fluid containers and fixed containers within a single page layout using Bootstrap. For example, I want to have a large image as a hero unit that spans 100% of the width and height of the viewport, or three column images e ...

htmlcsstwitter-bootstrap

The Bootstraps CSS style doesn't seem to be working properly or being overridden within an Angular

I have seen similar questions asked before, but none of the solutions provided have fixed my issue. It appears that the styles are being applied initially but then overridden by something else, and I am unable to identify what is causing this. The only r ...

cssangularbootstrap-4stylesheetangular8

I am attempting to design a working Hamburger icon using HTML and CSS, but it is not collapsing as intended

I am new to Bootstrap and experimenting with it. The responsive navbar in Bootstrap is not functioning as expected on my screen. Can someone help me identify the issue and fix it? <!DOCTYPE html> <html> <head> <link rel=&q ...

htmlcssbootstrap-5hamburger-menu

Is it usual for the container to overflow with div content?

Is this common CSS behavior? How can we make the container wrap around the button? http://jsfiddle.net/afrontrow/yepw7oLw/ CSS: .button { background: grey; padding: 10px 20px; } .container { border: 1px solid black; } HTML: <div class= ...

css

I am having an issue where my Bootstrap 4 col-sm-6 rows are not properly stacking on mobile devices

Currently facing issues with Bootstrap 4 as my columns are not stacking on top of each other in mobile view. I have two col-sm-6 within each row. Any guidance on how to resolve this would be greatly appreciated, thank you! Feel free to visit the website a ...

htmlcssbootstrap-4responsive

A guide to mastering the art of descending using three distinct class types

My script is functioning properly for a single class, but it fails to work for multiple classes with the same purpose. I attempted to transfer from div (#panel) to class (.panel) as I am using several classes. However, this adjustment did not resolve the i ...

jqueryhtmlcss