0

Is there a way to organize the code cells in a column format? I would like to write derivations in IPython notebook, but every auxiliary equation seems to break up my derivation. I'm using a module to write my equations and entering my equations into code cells, so I can't use simple html alignment inside markdown. Any help is greatly appreciated!

An example of what I mean is that I would like my code cells to look like this...

enter image description here

Instead of the regular vertically aligned cells...

Jakob
  • 19,815
  • 6
  • 75
  • 94
Charles
  • 947
  • 1
  • 15
  • 39
  • Can you supply a minimal example, so it is more clear what you are trying to achieve? – Jakob Apr 30 '14 at 09:37
  • @Jakob, I edited my question. Sorry for being unclear, I hope that helps...Any ideas how to do this? – Charles May 01 '14 at 17:05

1 Answers1

4

After some digging around, I found a hackish solution by modifying the notebook css. This works with IPython 2.0, but may not work with 1.x! To test this approach simply execute the following in your notebook

%%HTML
<style> 
div#notebook-container.container {
  /* This acts as a spacer between cells, that is outside the border */
  margin: 2px 0px 2px 0px;
  list-style: none;
  padding: 0;
  margin: 0;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;  
  justify-content: space-around;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
}
div.cell {
width:550px
}
  </style>

This way you get a flexible box layout and thus you can have two cell floating side by side. As I'm not an CSS expert this is for sure a rather weak hack, but it seems to work reasonable. To use this approach more seriously you might create a new profile and add the css to your custom.css.
I found some inspiration here.

The result looks like this
enter image description here

Jakob
  • 19,815
  • 6
  • 75
  • 94
  • I currently have a css file for my notebook, but this code and my css script seem to clash a bit. I'll look into how to make them both work, thanks @Jakob! – Charles May 02 '14 at 15:55