Arranging data into columns using HTML and CSS

I'm currently working on a CSS solution to organize various elements like buttons and text in a tabular column format. My main challenge lies in controlling the layout effectively, especially since CSS columns are not compatible with IE9 and earlier versions.

My goal is to horizontally align columns across the screen with a vertical-bottom alignment. I want the inner-most div to determine the column width, while its parent div dictates the spacing between each column.

If you have any advice or suggestions on how to approach this problem, please feel free to share your insights.

Layout

<--------------------> col3
<--------------------> col3
col1 <---------------> col3
col1 <--->  col2 <---> col3
col1 <--->  col2 <---> col3    

CSS

.column { float:left; height:100px; display:table; }
.col {
    vertical-align:bottom;
    display:table-cell;
    margin-right:15px;  /* this does not work */
}
.coldata { width:20px } /* no spacing - element occupies total width of object */

HTML

<div class="column">
<div class="col">
    <div class="coldata">A1</div>
    <div class="coldata">B1</div>
    <div class="coldata">C1</div>
</div>
<div class="column">  
<div class="col">
   <div class="coldata">A2</div>
   <div class="coldata">B2</div>
</div>
</div>

As shown, the columns are aligned at the bottom with data stacked vertically. Here is a link to a demo showcasing this setup.

Answer №1

In my coding, I utilize css tables for browsers that comply with the standards: http://jsfiddle.net/eZQGQ/.

Within the table model, the columns are generated from the cells that are present. Essentially, they do not physically exist: elements styled with display: table-column remain hidden (= display:none). Further details can be found at http://www.w3.org/TR/CSS2/tables.html#columns.

The choice of using the class .column was made as a bit of an unfortunate one. : )

To accommodate older versions of Internet Explorer, inline blocks need to be utilized. Here is a workaround:

<!--[if lte IE 7]><style>
  .column {
    display: inline;
    zoom: 1;
    margin-right: 15px;
  }
</style><![endif]-->

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

Trouble with Div Display

I have a section below my form that will show an alert message if there is an error. The issue I am facing is that if I use the inline-block property, everything within the section will be displayed in the alert color. I specifically want the background- ...

Position an iframe in alignment

I'm working on a HTML page and I have been trying to figure out how to align an iframe at the bottom of the page so that it spans the entire width. Despite my efforts, I haven't been successful in getting the iframe to align properly at the botto ...

Javascript function for downloading files compatible with multiple browsers

When working with a json response on the client side to build content for an html table, I encountered an issue with saving the file to the local disk upon clicking a download button. The csvContent is generated dynamically from the json response. Here&ap ...

Using cascading style sheets to switch a page into editing mode

Is it possible to change the view of a page after clicking a button without using javascript, and instead relying solely on CSS? I want to display a page with information where users can click an edit button and make changes within the same view rather th ...

What is the best way to add randomness to the background colors of mapped elements?

I am looking for a way to randomly change the background color of each element However, when I try to implement it in the code below, the background color ends up being transparent: { modules.map((module, index) => ( <div className='carou ...

Create a dynamic design with Angular Material's mat-drawer at full height using flexbox, allowing content

Yesterday, I encountered an interesting CSS problem involving the mat-drawer and Angular's router-outlet. My layout consists of a full-page flexbox with two children: a mat-toolbar at the top, and a custom component called app-sidenav at the bottom. T ...

What's the Reason Behind the Ineffectiveness of Footer Background Color in HTML CSS3?

Having some trouble setting the background color for my footer to something other than white. I've been able to successfully change the background of other layout elements, but the footer is giving me issues. Check out the code below: <footer> ...

MailJet experienced a template language issue while trying to send a message with Template [ID]

While running a test on a MailJet email template that includes a basic custom HTML code block, an error occurs in the received test email. (The live preview in the browser functions correctly) From [email protected]: An issue with the template lang ...

Creating unique ID tags using AngularJS

I am struggling with creating an HTML structure that looks like this: <ul> <li id="r1_1">Root node 1 <ul> <li id="child_node_1">Child node 1</li> <li id="child_node_2">Child node 2</ ...

How to Conceal File Extensions with .htaccess

Can anyone provide guidance on the best way to hide .php extensions using HTAccess, even for sub-folders? I have attempted various solutions from previous answers but none seem to work. ...

How to eliminate column padding in Bootstrap 4

Can you help me with a layout challenge I'm facing? I have two columns set up like this: <div class="row"> <div class="col-6"> hello </div> <div class="col-6"> hello ...

chart for visualizing two rows with matching IDs and dates

I have been attempting to accomplish the following two scenarios: 1) When both ID and dates are the same in the chart, but the descriptions differ, I want to display them on separate lines. 2) If there is not enough room to show the row label, I would li ...

Are there any other options available in JavaScript to replace the .unload() function?

I have a click event attached to multiple buttons on my page, each loading a different .php file into the same div. The issue arises when the time to load increases after several clicks. $('#start').click(function() { $('#mainbody&apos ...

What is the best way to eliminate unexplained spacing at the bottom of a webpage using CSS?

I am struggling to create a basic webpage using Bootstrap and D3, and I can't seem to figure out how to remove the excess whitespace at the bottom. Any tips on how to resolve this issue would be greatly appreciated. I attempted to set the min-height ...

Flex mode allows for responsive row details in ngx-datatable

Having an issue with my ngx datatable row details. Everything works well initially, but when I adjust the browser width, the details don't scale properly with rows and columns. They seem to have a fixed width that was set when the page was first loade ...

Conceal column exclusively on smaller displays using Bootstrap 4

I want to design a grid that covers the whole screen with 3 columns (left, middle, right) Left: This column should only be displayed on large views and occupy 16.6% of the screen (2/12) Middle: This column should always be visible. It should take up 75% ...

Deleting an item from a Vue.js list

I'm currently working on a project to develop a basic webpage that allows users to add or remove textboxes using vue.js. new Vue({ el: "#app", data() { return { list: [] }; }, methods: { deleteFromList(index) { this ...

Methods like jQuery blink(), strike(), and bold() offer dynamic ways to manipulate

I'm currently tackling an inquiry. The code I crafted seems to be functioning without any issues: (function () { if($('#target:contains("bold")')) { $('#target span:first').css('font-weight','bold ...

With *ngFor in Angular, radio buttons are designed so that only one can be selected

My goal is to create a questionnaire form with various questions and multiple choice options using radio buttons. All the questions and options are stored in a json file. To display these questions and options, I am utilizing nested ngFor loops to differ ...

PHP problem encountered when trying to assign values to a dropdown menu from an array

Specifically, the error message that I am encountering is: *Notice: Array to string conversion in C:\xampp\htdocs\Project1_Tables\index.php on line 38 Notice: Array to string conversion in C:\xampp\htdocs\Project1_Tables ...