CODEWITHSUNDEEP
htmlcss
JTalbott
JTalbott

Reputation: 81

How to make text stay in one column

I'm writing a song analysis. I have a div with 2 columns: one for lyrics, the other for analysis. The problem is that the lyrics are too long (I guess?) and continue to the analysis column.

I just made a div with 2 columns, and expected it to correctly contain my text.

#analysis {
    column-count: 2;
    column-gap: 25px;
    column-rule: 3px solid skyblue;
}

So, how do I keep my texts (lyrics, analysis) in their appropriate columns?

Upvotes: 0

Views: 1281

Answers (1)

connexo
connexo

Reputation: 56753

CSS columns are not what you want to use for your use case. Instead, give either flex-box or CSS grid a shot:

flex box

.song-analysis {
  display: flex;
  width: 100;
}

.song-analysis div {
  width: 50%;
  padding: 10px;
}

.lyrics {
  background-color: blue;
  color: white;
}

.analysis {
  background-color: yellow;
}
<div class="song-analysis">

  <div class="lyrics">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi reiciendis obcaecati nesciunt provident ipsum tenetur dolorem deleniti voluptatibus, odio ipsam blanditiis. Velit corporis vero officia itaque alias, voluptatibus quod ad! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi reiciendis obcaecati nesciunt provident ipsum tenetur dolorem deleniti voluptatibus, odio ipsam blanditiis. Velit corporis vero officia itaque alias, voluptatibus quod ad! 
  </div>
  <div class="analysis">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi reiciendis obcaecati nesciunt provident ipsum tenetur dolorem deleniti voluptatibus, odio ipsam blanditiis. Velit corporis vero officia itaque alias, voluptatibus quod ad!
  </div>

</div>

CSS grid

.song-analysis {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.song-analysis div {
  padding: 10px;
}

.lyrics {
  background-color: blue;
  color: white;
}

.analysis {
  background-color: yellow;
}
<div class="song-analysis">

  <div class="lyrics">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi reiciendis obcaecati nesciunt provident ipsum tenetur dolorem deleniti voluptatibus, odio ipsam blanditiis. Velit corporis vero officia itaque alias, voluptatibus quod ad! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi reiciendis obcaecati nesciunt provident ipsum tenetur dolorem deleniti voluptatibus, odio ipsam blanditiis. Velit corporis vero officia itaque alias, voluptatibus quod ad! 
  </div>
  <div class="analysis">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi reiciendis obcaecati nesciunt provident ipsum tenetur dolorem deleniti voluptatibus, odio ipsam blanditiis. Velit corporis vero officia itaque alias, voluptatibus quod ad!
  </div>

</div>

Upvotes: 1

Related Questions