What is the best way to arrange two <h3> headings into a two-column layout?

I'm facing an issue with positioning two <h3> tags, one labeled “Coding Skills” and the other “Professional Skills”, into separate columns. My aim is to have "Professional Skill" in the column to the right of "Coding Skills", creating a two-column layout.

The problem I'm encountering is that "Professional Skills" currently appears below "Coding Skills", and I'm unsure how to move it up so they align into two distinct columns - one for "Coding Skills" and one for "Professional Skills".

Any assistance on resolving this would be greatly appreciated. Thank you.

.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 class="skills-column">
      <h3 class="title">Professional Skills</h3>
      <div>-- Professional Skills Content --</div>
    </div>
  </div>
</section>

Desired Layout Example:

https://i.sstatic.net/SjGc6.png

Current Layout Example:

https://i.sstatic.net/JWsCl.png

htmlcss

Answer №1

Here is a method you can follow, with detailed explanations within the code and numerous references provided at the end:

/* Custom variables are defined within the :root selector and assigned specific colors using Firefox's color picker: */

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

*,
::before,
::after {
  /* Resetting default margins and paddings, ensuring elements adhere to the 'border-box' model: */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* Applying font color specified in custom variable: */
  color: var(--font-color);
  /* Using system-specific font for clarity, feel free to customize: */
  font-family: system-ui;
  /* Making sure body takes up full viewport height or more if needed: */
  min-block-size: 100vh;
}

.skills {
  /* Utilizing flex layout to align child elements next to each other: */
  display: flex;
  /* Shorthand for:
        flex-direction: row;
        flex-wrap: wrap;  */
  flex-flow: row wrap;
  justify-content: space-around;
  padding-bottom: 7rem;
  background: var(--second-bg-color);
}

.heading {
  /* Setting flex-basis to occupy full available inline space within parent container: */
  flex-basis: 100%;
  font-size: 2.5rem;
  text-align: center;
}

.heading > span {
  /* Coloring the span element within the heading: */
  color: var(--main-color);
}

.title {
  font-size: 2rem;
  /* Adjusting margin based on font size for better scaling: */
  margin-block-end: 0.5em;
}

.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 Link.

Another technique involves CSS grid layout, removing unnecessary elements, with comments inside the code and references listed below:

/* Custom variables defined in :root selector with specified colors from Firefox's color-picker tool: */

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

*,
::before,
::after {
  /* Resetting default margins and paddings, adhering to 'border-box': */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* Specifying font color from custom variable: */
  color: var(--font-color);
  /* Using personalized OS font for clarity, feel free to change: */
  font-family: system-ui;
  /* Ensuring body occupies viewport height or more if necessary: */
  min-block-size: 100vh;
}

.skills {
  /* Implementing grid layout: */
  display: grid;
  /* Creating two equal-width columns: */
  grid-template-columns: repeat(2, 1fr);
  /* Changing padding style to use logical properties: */
  padding-block-end: 7rem;
  /* Adding padding on inline axis to keep content away from edges: */
  padding-inline: 10%;
  background: var(--second-bg-color);
}

.heading {
  font-size: 2.5rem;
  /* Spanning across both grid columns: */
  grid-column: 1 / 3;
  text-align: center;
}

.heading > span {
  color: var(--main-color);
}

.skills > *:not(.heading):nth-child(odd of .skills-cell) {
  grid-column: 1;
}

.skills > *:not(.heading):nth-child(even of .skills-cell) {
  grid-column: 2;
}

.title {
  font-size: 2rem;
  margin-block-end: 0.5em;
}

.title::before,
.title::after {
  content: ' -- ';
}
<section class="skills">
  <h2 class="heading">My <span>Skills</span></h2>

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

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

JS Fiddle Demo Link.

References:

Answer №2

You have been structuring each element in a separate row, but I consolidated them into one row for better functionality.

.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 class="skills-column">
      <h3 class="title">Professional Skills</h3>
      <div>-- Professional Skills Content --</div>
    </div>
  </div>
</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to customize the appearance of a specific column in a k-grid td

While working with a kendo grid, I encountered an issue with setting a tooltip for one of the columns. After some experimentation, I discovered that in order for the tooltip to display correctly, I needed to override the overflow property on the k-grid td ...

htmlcssangularjskendo-uikendo-grid

Utilizing Functions within Arrays and Exploring Time Intervals for Optimization

I am currently working on a game development project where the game involves answering questions within a specific time frame. Each question should be answered within 10 seconds before resetting for the next one. I'm fairly new to JavaScript and would ...

javascriptjqueryhtml

What is the most effective way to incorporate animated hyperlinks?

I've been grappling with a webpage I'm designing, featuring sentences acting as links arranged in inline-block format. My goal is to create an animated effect that resembles twinkling stars, pausing the animation on hover. It feels like I'm ...

jquerycssanimation

Refresh the NodeJS page without resending user data

I am facing an issue with my Node Js local server and multiple identical html pages. Each page contains user input fields that are saved on a text file. The problem arises when users refresh the page, as the data from the previous page is sent and saved ag ...

htmlnode.js

Creating a div anchor tag within a component in React

Forgive me if this question has already made its rounds on the internet, but I can't seem to get anything to work in my favor. I was under the assumption that all you had to do was append the # + div id at the end of a URL to navigate to a specific d ...

javascripthtmlreactjs

CSS overflow property determines whether to display or hide the parts of an element

Is it possible to create HTML text that will automatically hide itself entirely if it exceeds the container size, instead of clipping with the overflow: hidden property? ...

htmlcss

Container Slides Along Despite Accurate Measurements

In a recent project of mine, I utilized two containers positioned side by side. Upon clicking a button, my goal was to have the content container (essentially a false body) decrease its width while the menu container would slide in. Despite my best effort ...

htmlcss

Expanding a dropdown list on the fly using vanilla JavaScript

I am restricted to using Vanilla JavaScript only, without any additional libraries like jQuery. Initially, I attempted to store all registered items in a global array and then use a forEach loop to append an <option> child to the <select>. How ...

javascripthtml

Crafting a custom React Native button component with an asymmetrical design

I am trying to design a unique custom react native button that is slanted on one side. Despite reading numerous articles, I haven't found a solution that meets my specific requirements. Below are examples of how I would like the buttons to look – on ...

javascriptcssreactjsreact-nativebutton

Difficulty with slideToggle and other jQuery animations arises when selecting specific elements

When elements are selected from the page using the following code: $('.offers')[count - 1].slideToggle(500); The slideToggle function stops working, along with any other animations. However, this code snippet does work: $('.offers')[ ...

javascriptjqueryhtmlcss

Is it possible to overlay two divs on top of a current website layout?

I am currently attempting to overlay two divs on top of an established website, similar to the layout shown in the image: While I am able to achieve this successfully in browsers like Firefox and Google Chrome, I am encountering difficulties when trying t ...

csshtml

CSS tables are not properly recognizing the class values within the table

This is the CSS I am working with: table { margin: 10px 0 20px 0; width: 100%; text-align: center; } table th { color: #38A4FC; padding-top: 5px; background-color: #f9f9f9; width: 200px; height: 30px; border: 1px solid #d7d7d7; border-bottom: none; } ...

csshtml-table

Tips for updating the primary color in Bootstrap?

How can I customize the primary color in Bootstrap to align with my brand's color scheme? Specifically, I'm using Bootswatch's Paper theme. ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Eliminate time data from the Google Map

I am looking to customize the appearance of my Google Map routes on my website by removing the time info box. <iframe src="https://www.google.com/maps/embed?pb=!1m46!1m12!1m3!1d204152.56634698433!2d174.4756264675282!3d-36.9170414111374!2m3!1f0!2f0!3f0! ...

jqueryhtmlcssgoogle-maps

Is it possible to alter the value and label of an HTML button in a permanent manner?

I am developing a personalized management system that records your activities from the previous day based on the buttons you clicked. I have successfully implemented the ability to edit these activity buttons using jQuery, but I would like these changes to ...

javascriptasp.nethtml

What are the steps to make a unique and eye-catching text underline animation?

I'm encountering an issue while attempting to create a hover animation for an <a> tag with an underline effect, similar to the example showcased on this particular webpage. Even though the tutorial is readily available, my implementation seems t ...

csshover

Looking for a smart way to extract all the selected elements from a form?

I am attempting to retrieve all the checked items from this form using JavaScript. I have looked at previous solutions, but none of them fit my requirements. <form id="checkform" class="container" style="margin-top:20px;"> <input type="checkb ...

javascriptjqueryhtml

The URL is functional in CodePen, but unfortunately does not seem to be working in JSFiddle

This code works perfectly on CodePen: http://codepen.io/ekilja01/pen/pEXLNY However, when tried on jsfiddle, the navigation bar is completely messed up. External resources are added on. What could be wrong? Any help would be appreciated! <link hr ...

htmlcsstwitter-bootstrapjsfiddlecodepen

Canvas with a button placed on top

I am working with a canvas and trying to position an HTML element over it using CSS. My goal is for the button to remain in place on the canvas even when resizing the entire page. Here is the code I am currently using. https://jsfiddle.net/z4fhrhLc/ #but ...

javascripthtmlcss

What is the best way to display a border around text in an HTML element when the mouse hovers over it?

I am currently developing a Browser Helper Object (BHO) for Internet Explorer that involves searching for specific words on a web page and encasing those words in an HTML tag for styling purposes. While I have code in place that allows me to change the st ...

javascripthtmlcssinternet-explorermouseover