CODEWITHSUNDEEP
htmlcss
Cubiod
Cubiod

Reputation: 31

Absolute positioning of text and buttons together in a row

I'm very new to HTML so i'm probably missing something very silly but i've been working at it a few nights now and need some help. I can get the buttons to work perfectly but the text just wont align for me. Set up multiple columns for each item and then set up rows. I want to arrange the columns like so.

enter image description here

I've tried the following but for some reason the text wont align and just prints one below the other.

.box {
  position: relative;
}

.button {
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 1px 2px;
  cursor: pointer;
  height: 25px;
  position: absolute;
}

.text {
  font-size: 18px;
  display: inline-block;
  width: 100%;
  position: absoulte;
}

.column1 {
  left: 10px;
}

.column2 {
  left: 60px;
}

.column3 {
  left: 75px;
}

.column4 {
  left: 205px;
}

.column5 {
  left: 270px;
}

.column6 {
  left: 290px;
}

.column7 {
  left: 305px;
}

.column8 {
  left: 390px;
}

.row1 {
  top: 10px;
}

.row2 {
  top: 40px;
}

.row3 {
  top: 70px;
}

.button1 {
  background-color: #008CBA;
  width: 90px;
}


/* Green */

.button2 {
  background-color: #008CBA;
  width: 90px;
}


/* Blue */

.button3 {
  background-color: #4CAF50;
  width: 110px;
}


/* Green */

.button4 {
  background-color: #4CAF50;
  width: 120px;
}


/* Blue */

.button5 {
  background-color: #4CAF50;
  width: 120px;
}


/* Blue */

.button6 {
  background-color: #4CAF50;
  width: 120px;
}


/* Blue */

.deselected1 {
  background-color: grey;
  width: 1px;
}


/* grey */

.selected1 {
  background-color: green;
  width: 1px;
}


/* grey */
<!DOCTYPE html>
<html lang="en">

<body>
  <div class="box">
    <button class="button column2 row1 deselected1"></button>
    <button class="button column6 row1 deselected1"></button>
    <button class="button column3 row1 button1"></button>
    <button class="button column7 row1 button2"></button>
    <div class="text column1 row1"> 00:00 </div>
    <div class="text column5 row1"> 18 </div>
    <div class="text column1 row1"> 00:30 </div>
    <div class="text column5 row1"> 18 </div>

    <button class="button column2 row2 deselected1"></button>
    <button class="button column6 row2 deselected1"></button>
    <button class="button column3 row2 button3"></button>
    <button class="button column7 row2 button4"></button>
    <div class="text column1 row1"> 01:00 </div>
    <div class="text column5 row1"> 20 </div>
    <div class="text column1 row1"> 01:30 </div>
    <div class="text column5 row1"> 21 </div>

    <button class="button column2 row3 deselected1"></button>
    <button class="button column6 row3 deselected1"></button>
    <button class="button column3 row3 button5"></button>
    <button class="button column7 row3 button6"></button>
    <div class="text column1 row1"> 02:00 </div>
    <div class="text column5 row1"> 21 </div>
    <div class="text column1 row1"> 02:30 </div>
    <div class="text column5 row1"> 21 </div>
  </div>
</body>

</html>

I'm currently getting this.

enter image description here

Any help would be great.

Upvotes: 0

Views: 926

Answers (4)

Kunal Tanwar
Kunal Tanwar

Reputation: 1291

Use Flexbox:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
}

.container {
  display: flex;
  align-items: center;
}

.progress {
  position: relative;
  width: 100px;
  height: 25px;
  margin: 0 1rem;
  background-color: red;
}

.progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 35px;
  height: 100%;
  background-color: green;
}
<div class="container">
  <span class="start">00:00</span>
  <span class="progress"></span>
  <span class="end">18</span>
</div>

<div class="container">
  <span class="start">01:00</span>
  <span class="progress"></span>
  <span class="end">20</span>
</div>

<div class="container">
  <span class="start">02:00</span>
  <span class="progress"></span>
  <span class="end">21</span>
</div>

Upvotes: 1

MetropolisCZ
MetropolisCZ

Reputation: 605

Or you can use a grid:

<div style="display: grid; grid-template-columns: min-content min-content min-content min-content 50px min-content min-content min-content min-content; grid-template-rows: autp auto auto; grid-row-gap: 10px; grid-column-gap: 4px;">
  <p>00:00</p>
  <button style="background-color: gray; width: 10px;"></button>
  <button style="background-color: green; width: 50px;"></button>
  <p>18</p>

  <p style="grid-column: 6;">00:30</p>
  <button style="background-color: gray; grid-column: 7; width: 10px;"></button>
  <button style="background-color: green; grid-column: 8; width: 85px;"></button>
  <p style="grid-column: 9;">21</p>

  <!-- Second row -->

  <p>01:00</p>
  <button style="background-color: gray; width: 10px;"></button>
  <button style="background-color: green; width: 30px;"></button>
  <p>18</p>

  <p style="grid-column: 6;">01:30</p>
  <button style="background-color: gray; grid-column: 7; width: 10px;"></button>
  <button style="background-color: green; grid-column: 8; width: 15px;"></button>
  <p style="grid-column: 9;">21</p>

  <!-- Third row -->

  <p>02:00</p>
  <button style="background-color: gray; width: 10px;"></button>
  <button style="background-color: green; width: 90px;"></button>
  <p>18</p>

  <p style="grid-column: 6;">02:30</p>
  <button style="background-color: gray; grid-column: 7; width: 10px;"></button>
  <button style="background-color: green; grid-column: 8; width: 105px;"></button>
  <p style="grid-column: 9;">21</p>
</div>

  • You can easily avoid inline styling in every element:

.gridDiv *:nth-child(4n - 2) {
  background-color: gray;
  width: 10px;
}

.gridDiv *:nth-child(4n - 1) {
  background-color: green;
}

.gridDiv *:nth-child(8n - 3) {
  grid-column: 6;
}

.gridDiv *:nth-child(8n - 2) {
  grid-column: 7;
}

.gridDiv *:nth-child(8n - 1) {
  grid-column: 8;
}

.gridDiv *:nth-child(8n) {
  grid-column: 9;
}
<div class="gridDiv" style="display: grid; grid-template-columns: min-content min-content min-content min-content 50px min-content min-content min-content min-content; grid-template-rows: autp auto auto; grid-row-gap: 10px; grid-column-gap: 4px;">
  <p>00:00</p>
  <button></button>
  <button style="width: 50px;"></button>
  <p>18</p>

  <p>00:30</p>
  <button></button>
  <button style="width: 85px;"></button>
  <p>21</p>

  <!-- Second row -->

  <p>01:00</p>
  <button></button>
  <button style="width: 30px;"></button>
  <p>18</p>

  <p>01:30</p>
  <button></button>
  <button style="width: 15px;"></button>
  <p>21</p>

  <!-- Third row -->

  <p>02:00</p>
  <button></button>
  <button style="width: 90px;"></button>
  <p>18</p>

  <p>02:30</p>
  <button></button>
  <button style="width: 105px;"></button>
  <p>21</p>
</div>

Upvotes: 0

Nitheesh
Nitheesh

Reputation: 20006

Find flex implementation of same. Get rid of position: absolute headache

.box {
  /* position: relative; */
  display: flex;
  flex-wrap: wrap;
}

.button {
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 1px 2px;
  cursor: pointer;
  height: 25px;
  /* position: absolute; */
}

.text {
  font-size: 18px;
  display: flex;
  /* display: inline-block;
  width: 100%; */
  /* position: absoulte; */
}

.container {
  display: flex;
  width: 50%;
  padding-right: 50px;
  box-sizing: border-box;
}

.button-container {
  display: flex;
  flex: 1;
}

.button1 {
  background-color: #008CBA;
  width: 90px;
}

/* Green */
.button2 {
  background-color: #008CBA;
  width: 90px;
}

/* Blue */
.button3 {
  background-color: #4CAF50;
  width: 110px;
}

/* Green */
.button4 {
  background-color: #4CAF50;
  width: 120px;
}

/* Blue */
.button5 {
  background-color: #4CAF50;
  width: 120px;
}

/* Blue */
.button6 {
  background-color: #4CAF50;
  width: 120px;
}

/* Blue */
.deselected1 {
  background-color: grey;
  width: 1px;
}

/* grey */
.selected1 {
  background-color: green;
  width: 1px;
} 
<div class="box">
  <div class="container">
    <div class="text column1 row1"> 00:00 </div>
    <div class="button-container">
      <button class="button column2 row1 deselected1"></button>
      <button class="button column3 row1 button1"></button>
    </div>
    <div class="text column5 row1"> 18 </div>

  </div>
  <div class="container">
    <div class="text column1 row1"> 00:30 </div>
    <div class="button-container">
      <button class="button column6 row1 deselected1"></button>
      <button class="button column7 row1 button2"></button>
    </div>
    <div class="text column5 row1"> 18 </div>
  </div>

  <div class="container">
    <div class="text column1 row1"> 01:00 </div>
    <div class="button-container">
      <button class="button column2 row2 deselected1"></button>
      <button class="button column3 row2 button3"></button>
    </div>
    <div class="text column5 row1"> 20 </div>
  </div>


  <div class="container">
    <div class="text column1 row1"> 01:30 </div>
    <div class="button-container">
      <button class="button column6 row2 deselected1"></button>
      <button class="button column7 row2 button4"></button>
    </div>
    <div class="text column5 row1"> 21 </div>
  </div>

  <div class="container">
    <div class="text column1 row1"> 02:00 </div>
    <div class="button-container">
      <button class="button column2 row3 deselected1"></button>
      <button class="button column3 row3 button5"></button>
    </div>
    <div class="text column5 row1"> 21 </div>
  </div>

  <div class="container">
    <div class="text column1 row1"> 02:30 </div>
    <div class="button-container">
      <button class="button column6 row3 deselected1"></button>
      <button class="button column7 row3 button6"></button>
    </div>
    <div class="text column5 row1"> 21 </div>
  </div>
</div>

Upvotes: 1

Ahsan Nadeem
Ahsan Nadeem

Reputation: 78

Please use Bootstrap your life will get a lot easier.

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-4">
                <div class="text text-right"> 00:00 </div>
            </div>
            <div class="col-md-4">
                <button class="btn btn-success btn-block">Button</button>
            </div>
            <div class="col-md-4">
                <div class="text column5 row1"> 18 </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-4">
                <div class="text text-right"> 00:00 </div>
            </div>
            <div class="col-md-4">
                <button class="btn btn-success btn-block">Button</button>
            </div>
            <div class="col-md-4">
                <div class="text column5 row1"> 18 </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Related Questions