Pure CSS Two Column Layout

March 30, 2023 Post a Comment

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 Jeky

Solution 1:

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%;
}

Solution 2:

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'.

Solution 3:

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.

Solution 4:

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>

Solution 5:

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'.

Html5 Guide