Question 257532 in Html Question posted in
Some basic documentation can be found here.

Html – How can I make two <h3> titles form into 2 columns?

I have two <h3> tags one of which is “Coding Skills,” and the other one is “Professional Skills.” What I want to do is place "Professional Skill" into the next, or second, column which is at the right side of "Coding Skills", so that they’ll form into two columns.

The problem I am encountering is, "Professional Skills" is currently placed right below "Coding Skills", and I have no idea how to raise it upwards so that they will form into 2 columns, 1 column for "Coding Skills" and 1 column for "Professional Skill".

I appreciate any help that will be offered. Thanks.

.skills {
  min-height: auto;
  padding-bottom: 7rem;
  background: var(--second-bg-color);
}

.skills .skills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5rem;
}

.skills-row .skills-column {
  flex: 1 1 calc(50% - 2.5rem);
  max-width: calc(50% - 2.5rem);
  box-sizing: border-box;
}

.skills-box .skills-content {
  position: relative;
  border: .2rem solid var(--main-color);
  border-radius: .6rem;
  padding: .5rem 1.5rem;
}

.skills-column .title {
  font-size: 2rem;
  margin: 0 0 1.5rem;
}

.skills-content .progress {
  padding: 1rem 0;
}

.skills-content .progress h3 {
  font-size: 1.7rem;
  display: flex;
  justify-content: space-between;
}
<section class="skills" id="skills">
  <h2 class="heading">My <span>Skills</span></h2>

  <div class="skills-row">
    <div class="skills-column">
      <h3 class="title">Coding Skills</h3>
      <div>-- Coding Skills Content --</div>
    </div>
  </div>

  <div class="skills-row">
    <div class="skills-column">
      <h3 class="title">Professional Skills</h3>
      <div>-- Coding Skills Content --</div>
    </div>
  </div>
</section>

This is what I want to achieve:

This is what I’m getting:

Tags:

2

Answers


  1. 0

    Html

    <div class="container">
<div class="colOne">first column</div>
<div class="colTwo">second column</div>
</div>

    css

    .container {
  display: flex;
  gap: 10px;
}
.colOne, .colTwo{
  width: 50%;
}
    Login or Signup to reply.
  2. 0

    One approach is as follows, with explanatory comments in the code along with quite a lot of references at the end:

    /* I've wrapped the custom variables you referenced, but never defined, in the
   :root selector, with the colours identified using Firefox's colour-picker,
   though the '#fff' was just an educated guess: */

:root {
  --font-color: #fff;
  --main-color: #00b0f0;
  --second-bg-color: #0c2c42;
}

*,
::before,
::after {
  /* removing browser default margins, paddings and ensuring that all
     elements are sized according to the 'border-box' algorithm: */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* best guess at where you might have specified the colour: */
  color: var(--font-color);
  /* to use the same font as your personal OS, which is typically
     balanced to provide clarity; obviously replace with your own
     preferred font: */
  font-family: system-ui;
  /* to ensure that the <body> occupies the full height of the
     viewport, or more (if the content requires it): */
  min-block-size: 100vh;
}

.skills {
  /* because you wanted the elements to be adjacent to each other, and
     they're both sibling children of the .skills element, I used
     flex layout on that element: */
  display: flex;
  /* using shorthand to set:
        flex-direction: row;
        flex-wrap: wrap;  */
  flex-flow: row wrap;
  /* this is one approach to bring the child elements away from the
     sides of the parent; though you may prefer to use padding instead
     along with 'space-between': */
  justify-content: space-around;
  padding-bottom: 7rem;
  background: var(--second-bg-color);
}

.heading {
  /* because the '.heading' is also a child of the flex-container that
     holds the elements you wish to have side-by-side; we here set the
     flex-basis to 100%, in order that it will occupy the full permitted
     inline space: */
  flex-basis: 100%;
  font-size: 2.5rem;
  /* centering the text: */
  text-align: center;
}

.heading > span {
  /* best guess at your styling approach, to colour
     the <span> within the '.heading': */
  color: var(--main-color);
}

.title {
  font-size: 2rem;
  /* I changed your shorthand margin declaration, since all elements
     have a zero margin by default, and used 'margin-block-end' to
     specify the margin on the last side of the element on the block
     axis; in languages that are read principally left-to-right, or
     right-to-left, and then top-to-bottom, this equates to the bottom
     edge, and is - in most cases - equivalent to 'margin-bottom,'
     I also used 0.5em instead of a rem-based size, because I feel that
     the margin should be adjusted based on the font-size, rather than
     being defined using a magic-number multiple of a base-font size
     (but obviously, do adjust to your own preferences and requirements): */
  margin-block-end: 0.5em;
}

/* I don't know if the decoration is meant to be there, or if it was just
   for your posted demo, but as it's decorative (I imagine) I moved it
   into the CSS, using generated content: */
.title::before,
.title::after {
  content: ' -- ';
}
    <section class="skills" id="skills">
  <h2 class="heading">My <span>Skills</span></h2>

  <div class="skills-row">
    <div class="skills-column">
      <h3 class="title">Coding Skills</h3>
      <div>Coding Skills Content</div>
    </div>
  </div>

  <div class="skills-row">
    <div class="skills-column">
      <h3 class="title">Professional Skills</h3>
      <div>Coding Skills Content</div>
    </div>
  </div>
</section>

    JS Fiddle.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search