block by ramnathv 8171521

Two Column Layout

Full Screen

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Two Column Layout</title>
  <meta charset="utf-8">
  <meta name="description" content="Two Column Layout">
  <meta name="author" content="Ramnath Vaidyanathan">
  <meta name="generator" content="slidify" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <link rel="stylesheet" href="//slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/io2012/css/default.css" media="all" >
  <link rel="stylesheet" href="//slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/io2012/css/phone.css" 
    media="only screen and (max-device-width: 480px)" >
  <link rel="stylesheet" href="//slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/io2012/css/slidify.css" >
  <link rel="stylesheet" href="//slidifylibraries2.googlecode.com/git/inst/libraries/highlighters/highlight.js/css/solarized_light.css" />
  <base target="_blank"> <!-- This amazingness opens all links in a new tab. -->  <link rel=stylesheet href="./assets/css/ribbons.css"></link>

  
  <!-- Grab CDN jQuery, fall back to local if offline -->
  <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
  <script>window.jQuery || document.write('<script src="//slidifylibraries2.googlecode.com/git/inst/libraries/widgets/quiz/js/jquery.js"><\/script>')</script> 
  <script data-main="//slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/io2012/js/slides" 
    src="//slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/io2012/js/require-1.0.8.min.js">
  </script>
  
  

</head>
<body style="opacity: 0">
  <slides class="layout-widescreen">
    
    <!-- LOGO SLIDE -->
        <slide class="title-slide segue nobackground">
  <hgroup class="auto-fadein">
    <h1>Two Column Layout</h1>
    <h2></h2>
    <p>Ramnath Vaidyanathan<br/></p>
  </hgroup>
  <article></article>  
</slide>
    

    <!-- SLIDES -->
    <slide class="RAW" id="slide-1" style="background:;">
  <hgroup>
    <h2>Two Column Layout</h2>
  </hgroup>
  <article data-timings="">
    <p>This is the default two column layout that ships with <code>io2012</code>.</p>

<pre><code>---
layout: slide
---
{{{ slide.content }}}
&lt;div style=&#39;float:left;width:48%;&#39; class=&#39;centered&#39;&gt;
  {{{ slide.left.html }}}
&lt;/div&gt;
&lt;div style=&#39;float:right;width:48%;&#39;&gt;
  {{{ slide.right.html }}}
&lt;/div&gt;
</code></pre>

  </article>
  <!-- Presenter Notes -->
</slide>

<slide class="" id="slide-2" style="background:;">
  <hgroup>
    <h2>Two Columns</h2>
  </hgroup>
  <article data-timings="">
    <p>This text should span the entire slide.</p>

<div style='float:left;width:48%;' class='centered'>
  <h2>Left</h2>

<p>This text should float to the left.</p>

</div>
<div style='float:right;width:48%;'>
  <h2>Right</h2>

<p>This text should float to the right.</p>

</div>
  </article>
  <!-- Presenter Notes -->
</slide>

    <slide class="backdrop"></slide>
  </slides>
  <div class="pagination pagination-small" id='io2012-ptoc' style="display:none;">
    <ul>
      <li>
      <a href="#" target="_self" rel='tooltip' 
        data-slide=1 title='Two Column Layout'>
         1
      </a>
    </li>
    <li>
      <a href="#" target="_self" rel='tooltip' 
        data-slide=2 title='Two Columns'>
         2
      </a>
    </li>
  </ul>
  </div>  <!--[if IE]>
    <script 
      src="//ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js">  
    </script>
    <script>CFInstall.check({mode: 'overlay'});</script>
  <![endif]-->
</body>
  <!-- Load Javascripts for Widgets -->
  
  <!-- LOAD HIGHLIGHTER JS FILES -->
  <script src="//slidifylibraries2.googlecode.com/git/inst/libraries/highlighters/highlight.js/highlight.pack.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
  <!-- DONE LOADING HIGHLIGHTER JS FILES -->
   
  </html>

index.Rmd

---
title       : Two Column Layout
author      : Ramnath Vaidyanathan 
framework   : io2012        # {io2012, html5slides, shower, dzslides, ...}
highlighter : highlight.js  # {highlight.js, prettify, highlight}
hitheme     : solarized_light # 
--- .RAW

## Two Column Layout

This is the default two column layout that ships with `io2012`.

    ---
    layout: slide
    ---
    {{{ slide.content }}}
    <div style='float:left;width:48%;' class='centered'>
      {{{ slide.left.html }}}
    </div>
    <div style='float:right;width:48%;'>
      {{{ slide.right.html }}}
    </div>

--- &twocol

## Two Columns

This text should span the entire slide.

*** =left

## Left

This text should float to the left.

*** =right

## Right

This text should float to the right.

index.md

---
title       : Two Column Layout
author      : Ramnath Vaidyanathan 
framework   : io2012        # {io2012, html5slides, shower, dzslides, ...}
highlighter : highlight.js  # {highlight.js, prettify, highlight}
hitheme     : solarized_light # 
--- .RAW

## Two Column Layout

This is the default two column layout that ships with `io2012`.

    ---
    layout: slide
    ---
    {{{ slide.content }}}
    <div style='float:left;width:48%;' class='centered'>
      {{{ slide.left.html }}}
    </div>
    <div style='float:right;width:48%;'>
      {{{ slide.right.html }}}
    </div>

--- &twocol

## Two Columns

This text should span the entire slide.

*** =left

## Left

This text should float to the left.

*** =right

## Right

This text should float to the right.

twocol_with_width.Rmd

--- &twocol_with_width

## Two Columns

This line should span both columns

*** =left width:66%

## Left Column

This line should span 2/3rds of the slide.

*** =right width:33%

This line should span 1/3rds of the slide.

twocol_with_width.html

---
layout: slide
---
{{{ slide.content }}}
<div style='float:left;width:{{{ slide.left.width }}};' class='centered'>
  {{{ slide.left.html }}}
</div>
<div style='float:right;width:{{{ slide.right.width }}};'>
  {{{ slide.right.html }}}
</div>