How to divide div into two columns(left side and right side)

Question

I want to divide the div into two columns such that

in Left side

data must be float: right;

in right side

data must be float: left;

Sample Html code

<div class="text-center">
  <p class="Project_Analytics_Heading">Time per Department</p>
  <div class="graph_bar_text" class="text-right">
    iOS
  </div>
  <div class="text-left">
    <button mat-button class="graph_bar_button" [style.width.px]="(g1 * 2)">
      <span class="graph_bar_percentage">
        {{g1}}%
      </span>
    </button>
  </div>

  <div class="graph_bar_text" class="text-right">
    Android
  </div>
  <div class="text-left">
    <button mat-button class="graph_bar_button" [style.width.px]="(g2 * 2)">
      <span class="graph_bar_percentage">
        {{g2}}%
      </span>
    </button>
  </div>

  <div class="graph_bar_text" class="text-right">
    Angular
  </div>
  <div class="text-left">
    <button mat-button class="graph_bar_button" [style.width.px]="(g3 * 2)">
      <span class="graph_bar_percentage">
        {{g3}}%
      </span>
    </button>
  </div>
</div>

css classes

.graph_bar_text{
  font-family: AvenirNext;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
  color: #9b9b9b;
}

.graph_bar_button{
  height: 28px;
  max-width: 200px;
  box-shadow: 0 9px 54px 0 rgba(66, 133, 244, 0.37);
  border-radius: 12.5px;
  background-color: #4285f4;
  margin-left: 22px;
}

.graph_bar_percentage{
  float: left;
  font-family: AvenirNext;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
  color: #ffffff;
}

Getting Output

Desired Output

I have referred similar question

Split Div Into 2 Columns Using CSS

and http://www.cssdesk.com/d64uy

Comments are greatly appreciated

score 1 · Answer 1 · edited Oct 03 '18 at 12:02

You have to wrap your texts and use flex

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

.graph_bar_text{
  font-family: AvenirNext;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
  color: #9b9b9b;
  text-align: right;
  width: 100px;
}

.graph_bar_button{
  height: 28px;
  max-width: 200px;
  box-shadow: 0 9px 54px 0 rgba(66, 133, 244, 0.37);
  border-radius: 12.5px;
  background-color: #4285f4;
  margin-left: 22px;
}

.graph_bar_percentage{
  float: left;
  font-family: AvenirNext;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
  color: #ffffff;
}

<div class="text-center">
  <p class="Project_Analytics_Heading">Time per Department</p>
  <div class="row">
    <div class="graph_bar_text" class="text-right">
      iOS
    </div>
    <div class="text-left">
      <button mat-button class="graph_bar_button" [style.width.px]="(g1 * 2)">
        <span class="graph_bar_percentage">
          {{g1}}%
        </span>
      </button>
    </div></div>
    <div class="row">
    <div class="graph_bar_text" class="text-right">
      Android
    </div>
    <div class="text-left">
      <button mat-button class="graph_bar_button" [style.width.px]="(g2 * 2)">
        <span class="graph_bar_percentage">
          {{g2}}%
        </span>
      </button>
    </div>
    </div>
    <div class="row">
    <div class="graph_bar_text" class="text-right">
      Angular
    </div>
    <div class="text-left">
      <button mat-button class="graph_bar_button" [style.width.px]="(g3 * 2)">
        <span class="graph_bar_percentage">
          {{g3}}%
        </span>
      </button>
    </div>
  </div>
</div>

score 1 · Answer 2 · answered Oct 03 '18 at 12:08

I would restructure the HTML, putting the labels in a flex column and the graphs in a separate flex column. Floats are not necessary which means the document flow is kept intact.

.container {
  text-align: center;
}

.graphs {
  display: flex;
  width: 100%;
  justify-content: center;
}

.graph_bar_text {
  display: flex;
  flex-direction: column;
  font-family: AvenirNext;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
  color: #9b9b9b;
}

.graph_bar_text p {
  margin: 0;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.graph_bar {
  display: flex;
  flex-direction: column;
}

.graph_bar_button {
  height: 28px;
  max-width: 200px;
  box-shadow: 0 9px 54px 0 rgba(66, 133, 244, 0.37);
  border-radius: 12.5px;
  background-color: #4285f4;
  margin-left: 15px;
}

.graph_bar_percentage {
  font-family: AvenirNext;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
  color: #ffffff;
}

<div class="container">
  <p class="Project_Analytics_Heading">Time per Department</p>
  <div class="graphs">
    <div class="graph_bar_text">
      <p>iOS</p>
      <p>Android</p>
      <p>Angular</p>
    </div>
    <div class="graph_bar">
      <button mat-button class="graph_bar_button">
       <span class="graph_bar_percentage">10%</span>
      </button>
      <button mat-button class="graph_bar_button">
        <span class="graph_bar_percentage">10%</span>
      </button>
      <button mat-button class="graph_bar_button">
        <span class="graph_bar_percentage">10%</span>
      </button>
    </div>
  </div>
</div>

score 1 · Accepted Answer · answered Oct 03 '18 at 12:19

Considering you are not using any css frame work, then using floats you can achieve that result, please have a look at the below workimg snippet, hope it helps :)

.text-center {
  text-align: center;
}

.graph_bar_text{
  font-family: AvenirNext;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
  color: #9b9b9b;
  float: left;
  clear: both;
  width: 35%;
  line-height: 28px;
  margin-bottom: 20px;
  text-align: right;
}

.graph_bar_button{
  height: 28px;
  max-width: 200px;
  margin-left: 22px;
  float: left;
  width: 200px;
  border: none;
  background: none;
}

.graph_bar_percentage {
  font-family: AvenirNext;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
  color: #ffffff;
  box-shadow: 0 9px 54px 0 rgba(66, 133, 244, 0.37);
  border-radius: 12.5px;
  background-color: #4285f4;
  display: block;
}

<div class="text-center">
  <p class="Project_Analytics_Heading">Time per Department</p>
  <div class="graph_bar_text">
    iOS
  </div>
  <div class="text-left">
    <button class="graph_bar_button">
      <span class="graph_bar_percentage" style="width: 90%">
        90%
      </span>
    </button>
  </div>

  <div class="graph_bar_text">
    Android
  </div>
  <div class="text-left">
    <button class="graph_bar_button">
      <span class="graph_bar_percentage" style="width: 20%">
        20%
      </span>
    </button>
  </div>

  <div class="graph_bar_text">
    Angular
  </div>
  <div class="text-left">
    <button class="graph_bar_button">
      <span class="graph_bar_percentage" style="width: 50%">
        50%
      </span>
    </button>
  </div>
</div>

Thanks for support.... left side div float: left; clear: both; text-align: right; really charms — Ratan Uday Kumar, Oct 04 '18 at 08:43

How to divide div into two columns(left side and right side)

3 Answers3