columns inside a tab

[Alex207 1]

i am making custom main profile layout for character app inside the account profile. i am using and customizing a bare bones code i found on here. it has tabs which is great. but i'd like to be able to make the information put into the body of those tabs split into two columns. can someone provide me with the correct coding to make this happen?

 

thank you

Alex

[Grimscythe 181]

I can't make a bunch of promises, as I'm relearning a lot of things and exploring new ones presently. However, if you're willing to give me a couple of days I will see what I can toss together. 😂

[Alex207 1]

sounds good!

 

[Arceus 1,082]

Sorry Grim.

 

  <div class="flexcontainer">
    <div class="flexinner">
      Left column
    </div>
    
    <div class="flexinner">
      Right column
    </div>
  </div>

.flexcontainer { display: flex; flex-wrap: wrap; align-items: center; }
.flexinner { padding: 10px; flex: 1 1 45%; margin: 5px; }

Best way to do this without just straight up using tables.

[Alex207 1]

<div class="tabbedholder">
    <div class="thead">
    <h2>Title Here</h2>
<br>
Played by: <!-- |field_#| --> FaceClaim: <!--|field_#| -->
    </div>
        <!-- TAB ONE -->
        <input type="radio" name="kit-tabs" id="tab1" checked="checked" />
        <label for="tab1">Tab One</label>

        <!-- TAB TWO -->
        <input type="radio" name="kit-tabs" id="tab2" />
        <label for="tab2">Tab Two</label>

        <!-- TAB THREE -->
        <input type="radio" name="kit-tabs" id="tab3" />
        <label for="tab3">Tab Three</label>

        <!-- TAB ONE STUFF -->
                <div class="info tab2">
      <h2>Title</h2>
      Stuff here tab1
                </div>

        <!-- TAB TWO STUFF -->
        <div class="info tab2">
      <h3>Title</h3>
      Stuff here tab2
        </div>

        <!-- TAB THREE STUFF -->
        <div class="info tab3">
      <h3>Title</h3>
      Stuff here tab3
        </div>
</div>

<style>.tabbedholder {
  background: #f9f9f9;
  color: #000;
  padding: 2%;
  margin: 0 auto;
  width: 90%;
}

.thead {
  margin: 0 0 1% 0;
}

.thead h2 {
  margin: 0;
  padding: 0 0 5px 0;
}

/* button styling */
.tabbedholder input {
  display: none; /* hide the radio button */
}

.tabbedholder label {
  position: relative; /* so we can move the buttons to the right */
  display: inline-block;
  left: 75%; /* change this as needed, try and stick to percentage values */
  padding: 10px 5px;
  text-align: center;
  border: 1px solid rgba(0,0,0, 0); /* invisible border */
  color: darkgray;
}

.tabbedholder label:hover /* alert users that something happens when they click */ {
  cursor: pointer;
  color: #1a1a1a;
}

/* the 'active' tab should look different */
.tabbedholder #tab1:checked ~ label[for="tab1"],
.tabbedholder #tab2:checked ~ label[for="tab2"],
.tabbedholder #tab3:checked ~ label[for="tab3"] {
  border: 1px solid #1a1a1a;
  border-bottom: 1px solid #f9f9f9;
  z-index: 1;
  color: #1a1a1a;
}

.info {
  border-top: 1px solid #1a1a1a;
  position: relative;
  top: -1px;
  display: none;
}

.tabbedholder #tab1:checked ~ .tab1 { display: block; }
.tabbedholder #tab2:checked ~ .tab2 { display: block; }
.tabbedholder #tab3:checked ~ .tab3 { display: block; }</style>

 

 

 

Where in this do i place that coding?? i tried to figure it out and it didn't work. I apologize. I am a newb at this and faking my way through half of it.

Thank you for your help!

Edited December 2, 2020 by Alex207

[Arceus 1,082]

Which tab do you want the columns in?

[Alex207 1]

the first tab. sorry i should have specified.

[Arceus 1,082]

So how this works is you'll put your content inside the <div class="info tab#">Stuff here tab#</div> sections. Where the Stuff here tab# part is, is what you'll be replacing.

For this, we'll take the first part with the divs and replace Stuff here tab1 with it. Make sure you keep the <div class="info tab2"></div> part.
The second part of the column code is CSS, so it can go after the <style> tag. You can just put it at the end right before </style>.

 

Altogether this'll look something like this:

<div class="tabbedholder">
    <div class="thead">
    <h2>Title Here</h2>
<br>
Played by: <!-- |field_#| --> FaceClaim: <!--|field_#| -->
    </div>
        <!-- TAB ONE -->
        <input type="radio" name="kit-tabs" id="tab1" checked="checked" />
        <label for="tab1">Tab One</label>

        <!-- TAB TWO -->
        <input type="radio" name="kit-tabs" id="tab2" />
        <label for="tab2">Tab Two</label>

        <!-- TAB THREE -->
        <input type="radio" name="kit-tabs" id="tab3" />
        <label for="tab3">Tab Three</label>

        <!-- TAB ONE STUFF -->
                <div class="info tab2">
                    <h2>Title</h2>
                        <div class="flexcontainer">
                            <div class="flexinner">
                                Left column
                            </div>
                                <div class="flexinner">
                                Right column
                            </div>
                        </div>
                </div>

        <!-- TAB TWO STUFF -->
        <div class="info tab2">
      <h3>Title</h3>
      Stuff here tab2
        </div>

        <!-- TAB THREE STUFF -->
        <div class="info tab3">
      <h3>Title</h3>
      Stuff here tab3
        </div>
</div>

<style>.tabbedholder {
  background: #f9f9f9;
  color: #000;
  padding: 2%;
  margin: 0 auto;
  width: 90%;
}

.thead {
  margin: 0 0 1% 0;
}

.thead h2 {
  margin: 0;
  padding: 0 0 5px 0;
}


/* button styling */
.tabbedholder input {
  display: none; /* hide the radio button */
}

.tabbedholder label {
  position: relative; /* so we can move the buttons to the right */
  display: inline-block;
  left: 75%; /* change this as needed, try and stick to percentage values */
  padding: 10px 5px;
  text-align: center;
  border: 1px solid rgba(0,0,0, 0); /* invisible border */
  color: darkgray;
}

.tabbedholder label:hover /* alert users that something happens when they click */ {
  cursor: pointer;
  color: #1a1a1a;
}

/* the 'active' tab should look different */
.tabbedholder #tab1:checked ~ label[for="tab1"],
.tabbedholder #tab2:checked ~ label[for="tab2"],
.tabbedholder #tab3:checked ~ label[for="tab3"] {
  border: 1px solid #1a1a1a;
  border-bottom: 1px solid #f9f9f9;
  z-index: 1;
  color: #1a1a1a;
}

.info {
  border-top: 1px solid #1a1a1a;
  position: relative;
  top: -1px;
  display: none;
}

.tabbedholder #tab1:checked ~ .tab1 { display: block; }
.tabbedholder #tab2:checked ~ .tab2 { display: block; }
.tabbedholder #tab3:checked ~ .tab3 { display: block; }

.flexcontainer { display: flex; flex-wrap: wrap; align-items: center; }
.flexinner { padding: 10px; flex: 1 1 45%; margin: 5px; }</style>

 

[Alex207 1]

so it took me a minute to decipher what you said. lol but i now have it working! thank you VERY much for giving me the code and explaining it to me.

[Grimscythe 181]

9 hours ago, Arceus said:

Sorry Grim.

 

  <div class="flexcontainer">
    <div class="flexinner">
      Left column
    </div>
    
    <div class="flexinner">
      Right column
    </div>
  </div>

.flexcontainer { display: flex; flex-wrap: wrap; align-items: center; }
.flexinner { padding: 10px; flex: 1 1 45%; margin: 5px; }

Best way to do this without just straight up using tables.

 

No problem! That's actually exactly what I was going to do, so seeing your response actually helped me too! It  means I've learned something!