Tabs and columns layout

• HollyW00d

  said

  Hello,

  I am trying to add a four column layout within the tab section on my website (http://travelingmailbox.com/pricing) so that when customers change tabs they can see the different features for each pricing set. However, when I put in the code for a four column layout or even a three column layout, the last set always moves underneath and I cannot get them to align horizontally. I do not know what the problem is and I have setup columns all through my site but they do not want to work within the Tabs. Any help?

  Thanks!

• jeffw

  said

  Hi, HollyW00d.

  Unfortunately the column shortcodes are not going to work inside the tabs and toggles shortcodes because of the inbuilt padding that is applied to those elements. Instead you will need to do make the columns using HTML. Something like this:

  [tabs]
    [tab title="Tab 1"]
      <div style="width: 22%; margin-right: 4%; float: left;">
        <p>Column 1</p>
      </div>
      <div style="width: 22%; margin-right: 4%; float: left;">
        <p>Column 2</p>
      </div>
      <div style="width: 22%; margin-right: 4%; float: left;">
        <p>Column 3</p>
      </div>
      <div style="width: 22%; float: left;">
        <p>Column 4</p>
      </div>
      [clear]
    [/tab]
    [tab title="Tab 2"]
      <div style="width: 22%; margin-right: 4%; float: left;">
        <p>Column 1</p>
      </div>
      <div style="width: 22%; margin-right: 4%; float: left;">
        <p>Column 2</p>
      </div>
      <div style="width: 22%; margin-right: 4%; float: left;">
        <p>Column 3</p>
      </div>
      <div style="width: 22%; float: left;">
        <p>Column 4</p>
      </div>
      [clear]
    [/tab]
  [/tabs]

• HollyW00d

  said

  Thanks Jeff!