Zozo Tabs - Full page width

Question

I was wondering if anyone here has experience with Zozo tabs and knows if it is possible to resize the tabs to the full, defined width of a page. At present, I'm trying to stretch 3 tabs across a page that is 1440px across. I have been able to apply a CSS style to somewhat implement this, the problem is that if I set the tabs to 480px or 33% each, the third tab moves to a new row and the first two tabs are at 50% each of the page width on a row above. The tabs do not move onto the same row until I set the width to 466px or 32% or lower, obviously the problem then is a large margin to the right. I've tried playing with values in between, but they do nothing, it is either one row with a large right margin or it jumps to two rows of tabs.

So my question is, is it possible to properly implement these three tabs to my 1440px defined width on a single row without the margin? Or was Zozo tabs not designed for this and is there an equal alternative?

I'm a relatively novice page builder, especially when it comes to more advanced stuff like this, so any help would be greatly appreciated to accomplish my goal and help further my abilities. Thank you very much in advance.

Answer 1

Ron_89, based on my understanding of your problem I tried this in the Zozo tab website. I edited the CSS using the DOM explorer in IE11. Here is a screen shot of what I understood as you are trying to achieve -

Notice the tab has occupied the complete space till the boundary points. The boundaries are on a hosting div tag. If the hosting div tag is set to spread across the screen, occupying it completely the tabs will spread across to occupy the entire screen horizontally. I achieved this by

Setting the width on the ul element for the tabs to 100%. 
Each li element then was set to a width which was 100 / 5, 

Since there are 5 tabs. If there were more tabs,

it should be 100 / (number of tabs). 

In some cases the exact value of width could be less than the value derived by 100 / (number of tabs) due to gutter or some other space occupying non visible elements in the markup. In such cases, please inspect the markup for such non visible space occupying elements using any of the developer toolbars in any browser. Hope this helps!!