Arrange a div within a list element to create a grid-like structure

My current structure is as follows:

<ul class="wrap-accordionblk">
<li class="accordionblk-item">
<div class="accordionblk-header">
    <div class="row-fluid">
        <div class="infoblk">
            <label>SESSION ID</label><strong>MM-00120853</strong>
        </div>
        <div class="infoblk">
            <label>DATE</label>31/01/16</div>
        <div class="infoblk">
            <label>SESSION NAME</label>ferrarif-2B0000118188</div>
        <div class="infoblk">
            <label>SEASON YEAR</label>AI 2015</div>
        <div class="infoblk">
            <label>ORDER TYPE</label>2B</div>
        <div class="infoblk">
            <label>ITEMS COUNT</label>1</div>
        <div class="infoblk">
            <label>VALUE </label>€ 94,92</div>
        <div class="infoblk"></div>

        </div>
</div>  
</li>

<li class="accordionblk-item">
    <div class="accordionblk-header">
        <div class="row-fluid">
            <div class="infoblk">
                <label>SESSION ID</label><strong>MM-00120854</strong>
            </div>
            <div class="infoblk">
                <label>DATE</label>29/01/16</div>
            <div class="infoblk">
                <label>SESSION NAME</label>ferrarif-2B0000118030</div>
            <div class="infoblk">
                <label>SEASON YEAR</label>AI 2015</div>
            <div class="infoblk">
                <label>ORDER TYPE</label>2B</div>
            <div class="infoblk">
                <label>ITEMS COUNT</label>1</div>
            <div class="infoblk">
                <label>VALUE </label>€ 94,92</div>
            <div class="infoblk"></div>
            </div>
    </div>  
</li>
</ul>

An issue arises when the session name (NOME SESSIONE) has varying numbers of characters, causing misalignment in the columns. Check out the problematic layout in this jsfiddle here.

How can I adjust the CSS to ensure that the columns align properly regardless of the character count in the string?

htmlcssalignment

Answer №1

By applying the width: 14.25%; property to the .infoblk class, the issue is resolved. Do you have a specific rationale for avoiding width assignments?

.infoblk{
  width: 14.25%;
}

Answer №2

If using a table is not an option, consider applying extra CSS classes to individual columns to set their widths. Alternatively, you can enclose each column of divs within an outer div so that they align with the width of the largest inner div.

<div class="column1">
    <div class="infoblk"></div>
    <div class="infoblk"></div>
</div>

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

Adjust font size using jQuery to its maximum and minimum limits

My jQuery script enables me to adjust the font-size and line-height of my website's CSS. However, I want to restrict the increase size to three clicks and allow the decrease size only after the increase size link has been clicked - ensuring that the d ...

javascriptjquerycssfontsfont-size

`Is there a tutorial on parsing HTML with nested tags using Simple DOM Parser?`

I am currently working on parsing an HTML file that contains several DIV elements structured like this: <div class="doc-overview"> <h2>Description</h2> <div id="doc-description-container" class="" style="max-height: 605px;"> <di ...

phphtmlparsingdom

What is causing the inability of this simple Google Maps link to function properly on a Nexus 7?

Visit this link for Google Maps A client has reported that the link above is causing an error when opening the maps app. The error message reads: "unsupported link. Google Maps can't open this link." This problem is occurring on a Nexus 7 and Samsu ...

androidhtmlgoogle-mapsmaps

Struggling with CSS button hover effect: can't get border and background change to work

Hello coding community! I am a beginner in programming and I'm eager to learn. Recently, I came across a stunning button effect on Codepen that caught my attention. You can check it out here. However, when I tried to replicate the code from this exam ...

htmlcssbutton

Can JavaScript be Utilized to Create Dynamic Layouts Successfully?

Are you curious about the viability of using Javascript to create fluid website layouts? While it is possible, how does it compare in terms of performance and complexity when compared to other methods like CSS3/HTML5? Take a look at the function below that ...

javascripthtmlcss

Managing line breaks in CSS

Here is a sample of HTML code with text lines breaking: <pre> one two three four five six </pre> I am looking to display it in the browser like this (with two lines per row and space using tab character "\t"): one two three four ...

htmlcss

Update the CAPTCHA, while also refreshing the entire registration form

JavaScript Snippet <script language="javascript" type="text/javascript"> function updateCaptcha() { $("#captchaimage").attr('src','new_captcha_image.php'); } </script> New Image Code <img src="new_ ...

javascriptphphtmlcss

What is the most effective method for displaying two external web pages next to each other?

Looking for a solution to display an English Wikipedia article on the left side of the page alongside its Spanish version on the right side. Wondering if it's possible using HTML, JavaScript, AJAX, etc. I am aware that I could use iframes, but I woul ...

javascripthtmlajaxiframe

Placing a table within a div causes the div to expand in width beyond 100%

A situation has arisen where a table with a large number of columns (30 columns) is being affected by the white-space:nowrap style set on each th tag, causing the parent div to stretch unnaturally. How can this issue be resolved and allow for a horizonta ...

htmlcsshtml-table

Learn how to save user input from form fields and text areas into JSON format using Angular

Is there a way to add comments using Angular when a user clicks on a button? Currently, whenever text is entered in the input field or textarea, it disappears and an empty block without any name, country, and comments is displayed. The entered text should ...

htmlangularjsjson

The detailView feature in wenzhixin bootstrap-table is failing to initialize the child row

I am currently utilizing the wenzhixin bootstrap table and attempting to initialize another bootstrap table within a child row known as 'detailView' in the code. Previously, I was using datatables but found this method to be simpler and more dir ...

jqueryhtmltwitter-bootstrapbootstrap-table

No visible changes from the CSS code

As I create a small HTML game for school, I'm facing an issue with styling using CSS. Despite my efforts to code while using a screen reader due to being blind, the styling of an element isn't being read out as expected. The content seems to be c ...

javascripthtmlcssng-animatescreen-readers

Guide to adjusting the screen resolution on your iPad 3

Hello everyone, I'm fairly new to designing for the iPad 3. Could someone please provide some guidance on how to set media queries specifically for the iPad 3? Thank you in advance. ...

css

Content does not become interactive upon the initial loading of the page

I've modified a W3 schools slideshow template to use text instead of dots, but I'm encountering two issues 1: The first image doesn't load when the page loads. Although using a class ID and setting it to active fixes this issue, it leads to ...

javascripthtmlcssslideshow

Can the outcome of a MySQL query be showcased in PHP without the need for looping?

Can I display the result of a MySQL query using an array index counter? I have a code that generates two tables for input numbers ranging from 6 to 11, dividing them equally if possible. It also generates team names incrementally (e.g., team 1, team2, ... ...

phphtmlmysqlsql

What is the best way to make the child Div float to the bottom of the parent Div?

Screenshot I attempted various CSS techniques in an effort to make the .booknetic_appointment_container_footer float to the bottom of #booknetic_theme_5, but unfortunately, I was unsuccessful. The closest solution I found involved hardcoding padding, but ...

htmlcss

Show an Angular Mat Card beneath the Input Field and position it on top of all other div elements

I am designing a signup page and I need to include a material card below the password field with checkboxes for password requirements. The challenge is that when the card appears, it pushes down all other elements such as the sign-up button. I want the ca ...

htmlcssangularangular-material

Ensuring the accuracy of user input

Can someone assist me with comparing two dates in JSP? I need validation that alerts the user when a future date is entered. The start date or end date should not be in the future. The date format is 12-5-2011 10:51:49. Any help would be greatly apprecia ...

javascripthtmljspvalidation

What is the best way to implement a sidebar closing animation?

Utilizing both react and tailwindcss, I successfully crafted a sidebar menu that elegantly appears from left to right when the user clicks on the hamburger icon. However, my attempts to create a reverse animation as the sidebar disappears from right to lef ...

javascriptcssreactjsnext.jstailwind-css

Using Python with Selenium, automate the process of clicking on each list item within

Hey there! I recently implemented the code below, and it worked perfectly. However, I'm now trying to figure out how to make it click on all the li items within a ul that have an empty class attribute. Any ideas on how to do this using Xpath? Xpath: ...

htmlpython-2.7python-3.xselenium-webdriveriteration