how to make text positioned in columns

Question

I have some columns I made with CSS. I want to know if I can make the text flow into columns, so that the text is like this:

<style>
th{border:1px solid black; border-bottom:none;}
     td{border-collapse:collapse;}
    </style>
    <table>
      <th colspan="2"> Header</th>
      <th colspan="2"> Header</th>
      
      <tr style="border:1px solid black;">
        <td style="border:1px solid black; border-right:1px solid gray;">Content</td>
        <td style="border:1px solid black; border-left:1px solid gray;">Content</td>
        <td style="border:1px solid black; border-right:1px solid gray;">Content</td>
        <td style="border:1px solid black; border-left:1px solid gray;">Content</td>
      </tr>

Each header spans two columns. I would prefer to do this without tables.

Why don't you want to use tables? They seem to be perfect for this situation. — Liftoff, Apr 12 '15 at 22:56
@MathNerdProductions Tables are not perfect in this situation, tables should only contain tabular data, not content. — Alexei Darmin, Apr 12 '15 at 22:59
@AlexeiDarmin You realize that answer links to posts that are more than a decade old, right? The question itself is more than 7 years old. Regardless, there is nothing *wrong* with using tables where they are efficient and easy to modify in the future. Where you get into trouble is in excess: nesting and the like. — Liftoff, Apr 12 '15 at 23:09
@MathNerdProductions It is an old post however it also contains a flushed out argument for the pros and cons of using tables in varying conditions. I admit tables won't crash anything however the best case with tables is the worst case with divs. Both take roughly the same amount of time to setup while `div`s are easier to change later. Oh and apperantly `tables` do not translate into screen readers well, however I have not experienced that. — Alexei Darmin, Apr 12 '15 at 23:27

score 0 · Answer 1 · edited May 23 '17 at 12:28

JSfiddle

See here to find out when to use tables: Why not use tables for layout in HTML?

The layout can be created with the following code, however if you wanted to overflow text into two columns then you will need to look into Javascript / jQuery.

HTML:

<div id="content">
  <div class="header">Header one</div>
  <div class="header">Header Two</div>

  <div class="quarter">Content One </div>
  <div class="quarter">Content Two</div>
  <div class="quarter">Content Three</div>
  <div class="quarter">Content Four</div>
</div>

CSS:

#content{
  display:block;
  background-color:grey;
  width:80%;
  height:200px;
  margin:auto;
  font-size:0pt;
}

.header{
  display:inline-block;
  text-align:center;
  font-size:12pt;
  width:48%;
  margin:1%;
  background-color:yellow;
}

.quarter{
  display:inline-block;
  text-align:center;
  font-size:12pt;
  width:23%;
  min-height:40px;
  margin:1%;
  background-color:green;
}

I know it works in the fiddle, but it doesn't work in my site: http://www.sarkelliancreed.comule.com. Click on "Tutorials and Snippets" at the top of the page. — yaakov, Apr 13 '15 at 00:06

how to make text positioned in columns

1 Answers1