Help need help troubleshooting a div code

[Alteras]

Spoiler

[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]
[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 ×-×

you have the inline style width:34% and that's overriding the 100% width from the class tab.

 

[myfanwy]

you have the inline style width:34% and that's overriding the 100% width from the class tab.

i feel like a lot of my problems on this thread would be solved if i read things over more.

thank you!

 

[myfanwy]

every time i try to fix the huge space underneath the code, it suddenly breaks.

Spoiler: before

name

basics​

t
h
i
s
s
c
r
o
l
l
s

personality​

t
h
i
s
s
c
r
o
l
l
s

history​

t
h
i
s
s
c
r
o
l
l
s

사
랑
해
요
coded by myfanwy

[div=float: center; background-color: black; margin: auto; background-position: 50% 30%; border-radius: 0%; border: 0px solid white; height: 250px; width: 200px; overflow: hidden; position: relative;][img]http://i65.tinypic.com/x3wa2p.jpg[/img][/div]
[div=height: 100%; background: #faf9fd; position: relative; margin: auto; width: 125px; pointer-events: none; top: -220px; margin-left: 550px; border-top: 2px solid #76a576; border-left: 2px solid #76a576; border-bottom: 2px solid #76a576; padding-left: 5px;]name[/div]
[div=height: 100%; background: #faf9fd; position: relative; margin: auto; width: 300px; top: -317px; margin-left: 677px; padding-left: 5px; border-top: 2px solid #76a576; border-right: 2px solid #76a576; border-bottom: 2px solid #76a576; border-left: 2px solid #76a576;][div=position: relative; width: 100%; height: 246px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][right][font=Montserrat][color=#5d8974]basics[/color][/font][/right]
[div=position: relative; width: 100%; height: 70px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][div=border-left: 1px solid #d7dbe3; padding: 4px;][size=2]t
h
i
s
s
c
r
o
l
l
s[/size][/div][/div][/div][right][font=Montserrat][color=#5d8974]personality[/color][/font][/right]
[div=position: relative; width: 100%; height: 70px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][div=border-left: 1px solid #d7dbe3; padding: 4px;][size=2]t
h
i
s
s
c
r
o
l
l
s[/size][/div][/div][/div][right][font=Montserrat][color=#5d8974]history[/color][/font][/right]
[div=position: relative; width: 100%; height: 70px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][div=border-left: 1px solid #d7dbe3; padding: 4px;][size=2]t
h
i
s
s
c
r
o
l
l
s[/size][/div][/div][/div][/div][/div][/div]
[div=height: 21px; background: #faf9fd; position: relative; margin: auto; width: 4px; top: -535px; margin-left: 676px;][/div]
[div=height: 100%; background: transparent; position: relative; margin: auto; width: 70px; top: -630px; margin-left: 480px;][font=Nanum Myeongjo][size=7][color=#faf9fd]사
랑
해
요[/color][/size][/font]
[font=Poiret One][size=1px][color=#faf9fd]coded by [USER=35109]@e d e n[/USER][/color][/size][/font][/div]

Spoiler: after

name

basics​

t
h
i
s
s
c
r
o
l
l
s

personality​

t
h
i
s
s
c
r
o
l
l
s

history​

t
h
i
s
s
c
r
o
l
l
s

사
랑
해
요
coded by myfanwy

[div=position: relative; width: 100%; height: 400px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: hidden;][div=float: center; background-color: black; margin: auto; background-position: 50% 30%; border-radius: 0%; border: 0px solid white; height: 250px; width: 200px; overflow: hidden; position: relative;][img]http://i65.tinypic.com/x3wa2p.jpg[/img][/div]
[div=height: 100%; background: #faf9fd; position: relative; margin: auto; width: 125px; pointer-events: none; top: -220px; margin-left: 550px; border-top: 2px solid #76a576; border-left: 2px solid #76a576; border-bottom: 2px solid #76a576; padding-left: 5px;]name[/div]
[div=height: 100%; background: #faf9fd; position: relative; margin: auto; width: 300px; top: -317px; margin-left: 677px; padding-left: 5px; border-top: 2px solid #76a576; border-right: 2px solid #76a576; border-bottom: 2px solid #76a576; border-left: 2px solid #76a576;][div=position: relative; width: 100%; height: 246px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][right][font=Montserrat][color=#5d8974]basics[/color][/font][/right]
[div=position: relative; width: 100%; height: 70px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][div=border-left: 1px solid #d7dbe3; padding: 4px;][size=2]t
h
i
s
s
c
r
o
l
l
s[/size][/div][/div][/div][right][font=Montserrat][color=#5d8974]personality[/color][/font][/right]
[div=position: relative; width: 100%; height: 70px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][div=border-left: 1px solid #d7dbe3; padding: 4px;][size=2]t
h
i
s
s
c
r
o
l
l
s[/size][/div][/div][/div][right][font=Montserrat][color=#5d8974]history[/color][/font][/right]
[div=position: relative; width: 100%; height: 70px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][div=border-left: 1px solid #d7dbe3; padding: 4px;][size=2]t
h
i
s
s
c
r
o
l
l
s[/size][/div][/div][/div][/div][/div][/div]
[div=height: 21px; background: #faf9fd; position: relative; margin: auto; width: 4px; top: -535px; margin-left: 676px;][/div]
[div=height: 100%; background: transparent; position: relative; margin: auto; width: 70px; top: -630px; margin-left: 480px;][font=Nanum Myeongjo][size=7][color=#faf9fd]사
랑
해
요[/color][/size][/font]
[font=Poiret One][size=1px][color=#faf9fd]coded by [USER=35109]@e d e n[/USER][/color][/size][/font][/div][/div][/div]

 

[Alteras]

You might want to use the [nobr] tag. All the enters you have are forcing it to be like that.

 

[myfanwy]

You might want to use the [nobr] tag. All the enters you have are forcing it to be like that.

the trick to that is that i don't know nobr tags that well :-:

 

[Alteras]

the trick to that is that i don't know nobr tags that well :-:

Well, it's quite useful, but if you don't want to use it, you can use position: absolute instead, but you'll need to keep another div on position relative so that it doesn't collapse on itself.

 

[Alteras]

the [nobr] tag makes it so that everything inside the tag doesn't have a enter space. it's useful for spreading out the code or hiding classes. To force a line break, you'll use [br][/br]. Anything inside the tags will not be displayed.

 

[myfanwy]

i'm going to be honest, i know in theory how nobr tags work, but in practice i'm absolutely shit at it, which is why i rarely dabble in bbcode+