Column-like layout in CSS without Bootstrap or Grids (Part-2)

#html #css #layouts

Another great way to to design our text into columns is going to back to the old ways of building websites. If you remember correctly, primitive websites were all just tables tweaked in different ways.

Well that's great because we can use just that to quickly place our texts in different columns . As always I would like to illustrate it with an example.

Let's first create an html skeleton of our texts

<section id="exhibit">

 <div class="col">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Vivamus porta massa eget pellentesque aliquam. Ut malesuada 
 sapien aliquam, 
 pharetra metus quis, finibus dui. 
 Curabitur fermentum ac leo non consectetur. 
 </div>


 <div class="col">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Vivamus porta massa eget pellentesque aliquam. Ut malesuada 
 sapien aliquam, 
 pharetra metus quis, finibus dui. 
 Curabitur fermentum ac leo non consectetur. 
 </div>


 <div class="col">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Vivamus porta massa eget pellentesque aliquam. Ut malesuada 
 sapien aliquam, 
 pharetra metus quis, finibus dui. 
 Curabitur fermentum ac leo non consectetur. 
 </div>

Then the CSS styling would be like this

#exhibit{
    height: 500px;
    display: table;
    width: 100%;
   }
.col{
    padding-left: 2em;
    padding-right: 2em;
    font-size: 1.2em;
    font-family: sans-serif;
    overflow: hidden;
    display: table-cell;
    background: grey;
   }

So we would like to lay these 3 divs as three separate columns. If you read the code, you would see the divs are wrapped in a section.

We set this parent/ wrapper to display: table . Then if we set its children to display: table-cell we would see them lined up in 3 columns.

The final output would look something like this

You can play around more with it if you like. Do let me know what you think of this in the comments below.
Thanks for reading.