Positioning divs in CSS can be achieved similarly to how table cells are structured in HTML

Question

Positioning divs in CSS can be achieved similarly to how table cells are structured in HTML

Once again today, I came across a familiar issue with CSS layouts. I want to have 5 divs in a horizontal row, each with different widths:

1: 60px,
2: 30%,
3: 40px,
4: *,
5: 100px

Back in the day, tables were the way to go for layouts, but now they are considered outdated due to accessibility reasons. I am looking for a modern solution that can work for any scenario.

Is there a generator, lightweight javascript solution (maybe a jQuery plugin), tutorial, book, or a magic trick that can help me solve this problem once and for all?

While a javascript-based solution is an option, I would prefer a non-script solution if possible.

javascript jquery css html

Answer 1

Answer №1

To achieve this desired outcome, you can utilize the CSS property display:table. I have created a quick demonstration on a sandbox.

By using display:table, you can make each individual div behave like a table cell with the surrounding container acting as the table. In my example, I opted for a section for a cleaner code structure, but a div could also serve the purpose.

When implementing this approach, you might observe that the table cells shrink beyond your defined dimensions on smaller window sizes due to the default behavior of tables. To address this issue, simply include a min-width property with the same value as the width to ensure consistent sizing.

Answer 2

To achieve this desired outcome, you can utilize the CSS property display:table. I have created a quick demonstration on a sandbox.

By using display:table, you can make each individual div behave like a table cell with the surrounding container acting as the table. In my example, I opted for a section for a cleaner code structure, but a div could also serve the purpose.

When implementing this approach, you might observe that the table cells shrink beyond your defined dimensions on smaller window sizes due to the default behavior of tables. To address this issue, simply include a min-width property with the same value as the width to ensure consistent sizing.

Answer 3

Answer №2

http://jsfiddle.net/abc123/def456/

#box1 {
    width: 80px;
}
#box2 {
    width: 50%;
}
#box3 {
    width: 60px;
}
#box4 {
}
#box5 {
    width: 120px;
}
.layout {
    display: table;
}
.cell {
    display: table-cell;
}

<html>
    <head>
        <title>DIV AS TABLE</title>
    </head>
    <body>
        <div class="layout">
            <div id="box1" class="cell">1</div>
            <div id="box2" class="cell">2</div>
            <div id="box3" class="cell">3</div>
            <div id="box4" class="cell">4</div>
            <div id="box5" class="cell">5</div>
        </div>
    </body>
</html>

Keep your fingers crossed! Modern browsers support this now!

Answer 4

http://jsfiddle.net/abc123/def456/

#box1 {
    width: 80px;
}
#box2 {
    width: 50%;
}
#box3 {
    width: 60px;
}
#box4 {
}
#box5 {
    width: 120px;
}
.layout {
    display: table;
}
.cell {
    display: table-cell;
}

<html>
    <head>
        <title>DIV AS TABLE</title>
    </head>
    <body>
        <div class="layout">
            <div id="box1" class="cell">1</div>
            <div id="box2" class="cell">2</div>
            <div id="box3" class="cell">3</div>
            <div id="box4" class="cell">4</div>
            <div id="box5" class="cell">5</div>
        </div>
    </body>
</html>

Keep your fingers crossed! Modern browsers support this now!

Positioning divs in CSS can be achieved similarly to how table cells are structured in HTML

Answer №1

Answer №2

Similar questions

Retrieving data from router in Angular

Developing procedural steps using CSS

Combine two JSON objects which share a common attribute

Creating custom generic functions such as IsAny and IsUnknown that are based on a table of type assignability to determine

Steps for placing the table within the box

What are some effective replacements for SoundManager2 worth considering?

Retrieving PHP information in an ionic 3 user interface

Rely on the razor method for generating URLs

Changing the color of a Highcharts series bar according to its value

The TypeScript error states that the argument type 'string | undefined' cannot be assigned to the parameter type 'string'

Guide to adding a CSS class to an Ionic2 toast

What could be the reason for esbuild not being included in the installation process of a fresh Rails 7 application that

Unable to deploy a node.js package via a jenkins job

Ways to enhance widget titles with borders on Blogger

"Change opacity smoothly with the FadeToggle feature for a

Activating a certain class to prompt a drop-down action

What does it mean when an "Unidentified column in the field list" error occurs?

showing javascript strings on separate lines

How can I deactivate the today button in the angular-ui bootstrap datepicker popup?

Is it possible to retrieve the var name from an interpolated expression using template literals?