Oxygen – post format – 2 columns

• 

  ricettecuore · Member · Mar 14, 2013 at 10:54 am

  • Copy link
  • Add topic to favorites

  I would like to define a different style for most of my post!

  I would like to be able to switch from writing in one column, into two columns, and the into one column.

  In other words i would like:
  TEXT
  TEXT FIRST COLUMN HERE. TEXT SECOND COLUMN HERE
  TEXT

  Should i use tables?
  I would like to define it in css.

  Thank you.

  The blog I need help with is: (visible only to logged in users)

• 

  justpi · Member · Mar 14, 2013 at 1:10 pm

  • Copy link

  No, you don’t need tables: you just need to define two classes in the CSS editor, and use these classes in the post editor. Do you want the two-column section to be different in any way than the rest of the content or not?

• 

  ricettecuore · Member · Mar 14, 2013 at 2:02 pm

  • Copy link

  No. I want to keep it simple. I want to keep the same formats i have in the rest of the post.
  Ideally, i would have a vertical bar, between the first and the second column.
  In this way:
  Text column 1 | Text column 2

  In column 1 i will write about a subject, let’s say food
  In column 2 i will write about another subject, let’say wine.
  Thus the number of lines will be different.

  I need 2 columns in order two separate graphically 2 different subjects.

  Thanks
  Chiara

• 

  ricettecuore · Member · Mar 14, 2013 at 2:27 pm

  • Copy link

  Should i do it with
  .floatingcolumn ?

• 

  justpi · Member · Mar 14, 2013 at 2:54 pm

  • Copy link

  Suppose you name your two classes “sinistra” and “destra”. Assuming you want two columns of equal width, you can add this in the CSS editor:

  .sinistra {
      float: left;
      margin-bottom: 1.75em;
      width: 48%;
  }
  .destra {
      float: right;
      border-left: 1px solid #bbb;
      margin-bottom: 1.75em;
      padding-left: 2%;
      width: 48%;
  }

  Then you’ll format the two-column section this way in the Text editor:

  <div class="clear-fix">
  <div class="sinistra">
  LEFT CONTENT HERE
  </div>
  <div class="destra">
  RIGHT CONTENT HERE
  </div>
  </div>

• 

  ricettecuore · Member · Mar 14, 2013 at 4:19 pm

  • Copy link

  It’Very strange.

  When i use it on my .com site, it works,( http://ricettedelcuore.com/2013/03/07/cotoletta-milanese-orecchia-elefante/) but when i use it on my hosting site, i have some problems in the text after the two columns.
  (http://www.ricettedelcuore.it/cotoletta-milanese-orecchia-elefante/)

  The text is exactly the same.
  Am i losing something?

  I know that there are differences, between wordpress .com and .org, but i think that html should work in same way.

  ?

  Anyway thank you! In .com works perfectly!

• 

  thesacredpath · Member · Mar 14, 2013 at 5:24 pm

  • Copy link

  Self-hosted and WordPress.com site themes are not the same and some things may not work as expected, but what Panos provided should. Themes here are pretty heavily modified to work with the highly customized WordPress software used here.

  Self-hosted sites are supported at http://wordpress.org/support/ .

• 

  justpi · Member · Mar 14, 2013 at 8:46 pm

  • Copy link

  Reason for the difference: to prevent the next section from wrapping around the shorter column I used the “clear-fix” class, which is already defined in the original CSS of the wordpress.com version of the theme but doesn’t exist in the self-hosted version. So for your self-hosted blog the CSS you’ll add needs to be a little different.

• 

  ricettecuore · Member · Mar 14, 2013 at 9:27 pm

  • Copy link

  Thank you.
  I was wondering what was the sense of clear-fix. When i removed it (in wordpress.com) i had everything in a mess.
  I will look for the class for self- hosted blog.

  I have been studying a little bit.. And at least i am trying to understand what i write!

  Cheers.
  Chiara