0

I have the following two excerpts of code from a website I am messing around with. I am trying to make a change with the lines and I am struggling to do so. The idea is to have the following:

"Javascript"

4+ years

"HTML"

3+ years

and so on but without the line spacing added between the years and the programming language, in other words, only line spacing between each programming language. I have thought of using pre tag but that only makes it worse.

Edit: Please try to provide a solution that will not require 20 column divs/wrappers, or will mess with the positioning of the columns. Thank you!

HTML:

<div class="column" id="column1">
      <h2>Programming Languages</h2>
      Java 4+ yrs <br>
      SQL - 2+ yrs <br>
      JavaScript - 2 yrs <br>
      <h2>Tools</h2>
    </div>
    <div class="column" id="column2">
      Python - 2 yrs <br>
      C# - 1+ yrs <br>
      C++ - 1 yr <br>
    </div>

    <div class="column" id="column3">
      HTML ~ 1 yr <br>
      CSS ~ 1 yr <br>
      Bash ~ 1 yr
    </div>

CSS:

.column{
  position: absolute;
  color: white;
  font-size: 16px;
  line-height: 60px;
}

#column1{
  margin-top: 100px;
  left: 300px;
}

#column2{
  margin-top: 100px;
  left: 600px;
}

#column3{
  margin-top: 100px;
  left: 900px;
}
  • What do you want it to look like? Also, is there a reason you don't want more complicated solutions (that may or may not affect the positioning of columns)? – Edward Dec 15 '21 at 04:18
  • I would accept complicated solutions but I don't want to spend an hour re-coding the positioning and whatnot. I'll edit that part out, any solution is welcome and I'll figure out the rest. –  Dec 15 '21 at 04:22
  • Is there a reason why the Tools heading is all by itself at the bottom of a column? – Jon P Dec 15 '21 at 04:47
  • Since it's simple placeholder code, that is more text I was going to add later on, so more columns to deal with –  Dec 15 '21 at 04:49
  • Where does column spacing come into this? You seem more concerned about the height between lines. Can you clarify exactly what you need, can you provide an image that illustrates the desired result? – Jon P Dec 15 '21 at 04:57
  • You are correct, it seems I messed up the title a bit. I am concerned with the spacing between the name of the programming language and the years. The image was provided at the start, u can see more or less what I want. –  Dec 15 '21 at 05:01

2 Answers2

0

If i'm understanding your question correctly just add in your css style "line-height:How ever long"

Car to the ter
  • 1
0

You can put each language and years in

and wrap each language and year in div. Then add css line height property with the value you want to divs.

Nayereh Rasuli
  • 216
  • 2
  • 8
  • Although that is definitely one solution, I would require 14 different columns and that's not very practical, I need a simpler solution that will execute the code a bit nicer –  Dec 15 '21 at 04:43