Display a grid using divs

Question

I'm trying to practice some CSS/HTML, and I am listing what should be done in a table using divs.

The issue I am having is that when I am setting the margin's, the text isn't lining up into columns properly because some text is longer than others, so it results in a jagged table.

e.g.

123 hello coool
123 asdfasdfsadf  cool
123 hello coool
123 asdfasdfasdf  kkk

So the spacing between each section is correct i.e. 20px, but since the text varies in length it doesn't look aligned.

what's the issue here? is there a solution to this (I know a table would make it easier, but I want to learn the div way)

Answer 1

You're probably not assigning them fixed widths, causing them to just be sized automatically. Tables will automatically make each cell in a column the same width, but it cannot be done using s, you need to set a fixed width.

Answer 2

How are you getting your divs to line up next to each other -- that is, simulate rows? If you are using floats, e.g. float: left, then the effect you're experiencing is commonly known as shrink-wrapping. In a shrink-wrapped div, the div's width will automatically correspond to the length of the content.

The only pure html/css way around this is explicitly set the width property of your div. You'd need to set each of the divs in a column to the same explicit width. In order for this to be effective, you need to have some idea of the length of your content, and set width at least as wide.

If you want each div in a column to dynamically inherit a width from whichever div ends up having the longest content, you'd have to use javascript.

Answer 3

You could make each column its own div. EG:

<div class="col1">
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
</div>
<div class="col1">
    <p>hello</p>
    <p>asdfasdfasdf</p>
    <p>hello</p>
    <p>asdfasdfasdf</p>
</div>
<div class="col1">
    <p>cooool</p>
    <p>cooool</p>
    <p>cooool</p>
    <p>cooool</p>
</div>

and do

.col1, .col2, .col3 {
    float: left;
}

but it will only result in pain and suffering.

I don't know why you want to do it this way; perhaps you heard "tables are wrong", but that is incomplete. The whole phrase is "tables are wrong for layout".

Use tables for tabular data, like this.

Answer 4

It's not a table vs divs, it should be a table vs. semantic markup. If you just replace all the table elements with divs you're missing the entire point of the whole thing.

Also in your example you would use a table.