Pure CSS Two Column Layout

Question

I am currently using Jekyll, and I am attempting to create something that looks like this, where the code is on the right and the explanations are on the left.

The output from Jekyll's markdown processor will look something like this:

<p>Some explanation goes here</p>
<pre> // some code goes here </pre>
<p>Another example...</p>
<pre> // more example code goes here </pre>

So far, I have been able to achieve the two-column look by using float in CSS and making width: 50%;.

pre {
    float: right;
    width: 50%;
}

h1, h2, h3, h4, h5, h6, p, a {
    float: left;
    width: 50%;
    margin-right: 50%;
}

However, this results in the <pre> tags being below the text I want, whereas I want the code to the right of the text.

What would be the best way to solve this problem using pure CSS?

Thanks!

Using div tags makes life easy. Try creating two div boxes fro left and right and match the code. — PseudoAj, May 07 '16 at 20:39
Agreed, div would make this super simple. However, I don't think I can add divs in markdown and have the markdown processor render it properly. If you could suggest one that does translate markdown within HTML tags and can plug directly into Jekyll, that would be great! — Eric Taw, May 07 '16 at 20:45
@marcelo2605, thanks for your suggestion. Unfortunately, that didn't make a difference. — Eric Taw, May 07 '16 at 20:46

score 2 · Answer 1 · answered May 07 '16 at 20:43

Here is a simple demo. HTML:

<div class="left">
<p>Some explanation goes here</p>
<p>Another example...</p>
</div>
<div class="right">
<pre> // some code goes here </pre>
<pre> // more example code goes here </pre>
</div>

CSS:

div.left {
    float: left;
    width: 50%;
}

div.right {
    float: right;
    width: 50%;
}

score 1 · Answer 2 · answered May 07 '16 at 20:53

Two block elements have the width 50%, margin is also 50%, and that's 150%. Browser max. width is 100%, so you need to eliminate margin and any border around elements (border also have some width, no matter how small..) in order to make float works. You may set width of the two block elements on, for example, 45 % (without any margin), and because they are floating right and left, you'll have the 10 % gap between them. Ancor is not a block element, to make behave like such you'll need to write in css:

a {display: block}

'pre' element needs 'overflow' set to 'auto' or 'hidden'.

Michael Schwartz · Answer 3 · 2016-05-07T21:25:51.237

Weave: http://kodeweave.sourceforge.net/editor/#f336823273b963b2c364bc34bd11a1d5

If you want resizable columns take a look into JqxSplitter. (requires JQuery)

html, body {
  height: 100%;
}

body {
  background: #dedede;
}

.content {
  padding: 10px;
  margin: 20px;
  border: 1px solid #000;
  background: #fff;
}
.desc, .code {
  width: 43%;
}

.desc {
  display: inline-block;
  padding: 10px;
}
.code {
  display: inline-block;
  float: right;
  background: #eee;
  color: #333;
  border: 1px solid #aaa;
  height: 100%;
  padding: 10px;
}

<div class="wrapper">
  <div class="content">
    <div class="desc">
      <h3>Data Organization</h3>
      
      Data on Quandl is organized into databases and datasets.

<p>A dataset is a single time series, with one or more columns. Column 0 of a dataset is always the date column. Columns 1 to n are data columns.</p>

<p>A database is a collection of datasets from a single publisher and/or on a single subject.</p>

<p>The Quandl API provides methods to access both dataset and database objects, provided you know their Quandl codes.</p>
    </div>
    <pre class="code">html, body {
  height: 100%;
}

.lorem {
  border: 1px solid #000;
}

.ispum {
  float: left;
}
.door {
  float: right;
}</pre>
  </div>
  <div class="content">
    <div class="desc">
      <h3>Quandl Codes</h3>
      
      Every database on Quandl has a unique string identifier called the database_code.

<p>Every dataset on Quandl belongs to one and exactly one database. Every dataset thus has a database_code as well as a dataset_code associated with it. Both of these are required to uniquely identify the dataset.</p>

<p>The combination of database_code and dataset_code is called the Quandl code.</p>
    </div>
    <pre class="code">html, body {
  height: 100%;
}

.lorem {
  border: 1px solid #000;
}

.ispum {
  float: left;
}
.door {
  float: right;
}</pre>
  </div>
</div>

score 0 · Answer 4 · answered May 07 '16 at 20:54

Move the pre tag above the left column in the HTML - floating elements to the right often means they need to appear before the left side items in the HTML. Also, wrapping both columns in a common div will allow you to clear any previous columns.

You can use the calc property for widths....

<div class="wrap">
    <div class="rightcol">
        <pre> //Code output </pre>
    </div>
    <div class="leftcol">
        <h1>Some Text here</h1>
    </div>
  <div class="clear"></div>
</div>

You can loop the above HTML and use it as often as you want. It will use the same CSS and create 2 columns in every iteration.

.wrap {
  clear: both;
 padding: 10px;
 margin: 20px;
 border: 1px solid #000;
 background: #fff;
}
.rightcol {
    width: calc(50% - 22px);
    background: #eee;
    color: #333;
    border: 1px solid #aaa;
    float: right;
    padding: 10px;
    display: inline-block;

    height: 200px; /*this is just for the fiddle*/
}
.leftcol {
  width: calc(50% - 22px);
  display: inline-block;
  padding: 10px;
}
h1 { margin:0; padding:0;}
.clear { clear: both; }

Here's a jsFiddle Sample

Some minor CSS media queries for the left and ride side would allow this to be responsive.

score 0 · Answer 5 · answered May 08 '16 at 21:05

This is very simple. Add float:left to paragraphs and code blocks. Use clear:left on p's. Make sure there is enough space for two elements next to each other. Add overflow:auto to the container. Like this: http://codepen.io/anon/pen/grqRPr. Add some padding if you want a 'gutter'.

Pure CSS Two Column Layout

5 Answers5

Linked