you have the inline style width:34% and that's overriding the 100% width from the class tab.[class=tabs] float: left; background-color: #FFFFFF; border: 1px solid transparent; border-radius: 2px; box-shadow: 0px 0px 1px #FFFFFF; box-sizing: border-box; color: black; font-family: Cinzel; font-size: 13px; font-weight: initial; line-height: 1; margin: 20px auto; min-width: 250px; text-align: center; width: 30%; height: 300px; position: relative; top: 0px; [/class] [class=tab] box-sizing: border-box; cursor: pointer; display: block; padding: 22px 16px; width: 100%; border: none; outline: none; [/class] [class name=tab state=hover] background-color: transparent; [/class] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} i) (show tabsContenti) if (eq ${currentTab} ii) (show tabsContentii) if (eq ${currentTab} iii) (show tabsContentiii) [/script] [script=tab] hide tabsContent show tabsContenti [/script] [div class=tabs][div class=tab style="border-top-left-radius: 5px; border-bottom-left-radius: 5px;"]i[/div][div class=tab]ii[/div][div class=tab style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"]iii[/div][/div] [div class="tabsContent tabsContenti"]a[/div] [div class="tabsContent tabsContentii"]b[/div] [div class="tabsContent tabsContentiii"]c[/div]
Code:[nobr] [class=tabs] float: left; background-color: #FFFFFF; border: 1px solid transparent; border-radius: 2px; box-shadow: 0px 0px 1px #FFFFFF; box-sizing: border-box; color: black; font-family: Cinzel; font-size: 13px; font-weight: initial; line-height: 1; margin: 20px auto; min-width: 250px; text-align: center; width: 30%; height: 300px; position: relative; top: 0px; [/class] [class=tab] box-sizing: border-box; cursor: pointer; display: block; padding: 22px 16px; width: 100%; border: none; outline: none; [/class] [class name=tab state=hover] background-color: transparent; [/class] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} i) (show tabsContenti) if (eq ${currentTab} ii) (show tabsContentii) if (eq ${currentTab} iii) (show tabsContentiii) [/script] [script=tab] hide tabsContent show tabsContenti [/script] [div class=tabs][div class=tab style="border-top-left-radius: 5px; border-bottom-left-radius: 5px;"]i[/div][div class=tab]ii[/div][div class=tab style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"]iii[/div][/div] [div class="tabsContent tabsContenti"]a[/div] [div class="tabsContent tabsContentii"]b[/div] [div class="tabsContent tabsContentiii"]c[/div][/nobr]
i've pretty much figured out the whole "vertical tab" thing, however, the last tab doesn't want to cooperate and stay in a uniform line with the other two ×-×