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

How do I split text into 2 columns from a single column using flex but with the same heading? – Html

So I’m creating a footer for my website and the main link is called Club Links. I could just display all 20 club links one under the other, but I’m trying to split it into 2 columns of 10. enter image description here

I tried using flex, but it d[enter image description here](https://i.stack.imgur.com/U7ETJ.png)idn’t work. Anyone got tips?

Tags:

2

Answers


  1. 0

    According to the information you provided, the thing is keeping it from working is that you are not applying styles to the col2 classes where the columns are, here’s a quick way you could do to fix this:
    Wrap the classes col2 inside a div as follows:

    <div class="columnsContainer">
  <div class="col2">...</div>
  <div class="col2">...</div>
</div>

    and apply the following styles to "columnsContainer" and "col2" classes:

    .columnsContainer{
  display: flex;
}

.col2{
  margin-left: 50px;
}

    you can add different styles here but the core that will order the columns the way you want is this.

    Let me know if this worked for you

    Login or Signup to reply.
  2. 0

    you can put all your links into a container and use grid css or flex option

    something like that

    .footer {
  display: flex;
  gap: 0 20px;
}

/* styles for option with grid */
.links {
  display: grid;
  gap: 8px 16px;
  grid-template-columns: 1fr 1fr;
}

/* styles for option with flex */
.linksWithFlex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.link {
  width: 40%;
}
    option with grid
<footer class='footer'>
    <div class='col'>col1</div>
    <div class='col'>col2</div>
    <div class='col'>
      <h4 class='title'>title</h4>
      <div class='links'>
        <a href='#'>test link</a>
        <a href='#'>test link</a>
        <a href='#'>test link</a>
        <a href='#'>test link</a>
        <a href='#'>test link</a>
        <a href='#'>test link</a>
        <a href='#'>test link</a>
        <a href='#'>test link</a>
        <a href='#'>test link</a>
        <a href='#'>test link</a>
        <a href='#'>test link</a>
        <a href='#'>test link</a>
      </div>
    </div>
  </footer>
  
  option with flex
  <footer class='footer'>
    <div class='col'>col1</div>
    <div class='col'>col2</div>
    <div class='col'>
      <h4 class='title'>title</h4>
      <div class='linksWithFlex'>
        <a href='#' class='link'>test link</a>
        <a href='#' class='link'>test link</a>
        <a href='#' class='link'>test link</a>
        <a href='#' class='link'>test link</a>
        <a href='#' class='link'>test link</a>
        <a href='#' class='link'>test link</a>
        <a href='#' class='link'>test link</a>
        <a href='#' class='link'>test link</a>
        <a href='#' class='link'>test link</a>
        <a href='#' class='link'>test link</a>
        <a href='#' class='link'>test link</a>
        <a href='#' class='link'>test link</a>
      </div>
    </div>
  </footer>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search