CODEWITHSUNDEEP
htmlcssbootstrap-4
Prasad Parab
Prasad Parab

Reputation: 496

Dividing my page in 2 vertical columns HTML

I am designing a web-page where I need to divide the width of page in 2 vertical parts. In first half I want to show a pie-chart and second part I want to show a table.

I have tried below code 

<div id="canvasSec" class="c1 col-xs-6">
  <div id="div1" class="details col-xs-6">
    <canvas id="can1" (click)="getDetails(chart)">{{chart}}</canvas>
  </div>
</div>

<div class="col-xs-6">

  <table class="table">
    <th>Header</th>
    <tr>
      <th> Header 1</th>
      <th> Header 2</th>
      <th> Header 3</th>
      <th> Header 4</th>
      <th> Header 5</th>
      <th> Header 6</th>
    </tr>
  </table>
</div>

When there are few number of columns in table it works fine but when number of in table increases the table is rendered below the chart.

How can I solve this?

Upvotes: 0

Views: 180

Answers (1)

L M
L M

Reputation: 36

A relatively simple method would be to just use your own grid container instead of trying to make bootstrap work for it. I'm saying this since your answer didn't require that this is bootstrap and this is simpler to me and allows you to add your own customization more easily.

CSS

.grid-container {
  display: grid;
  grid-template-columns: 50% 50%;
}

HTML

<div class="grid-container">
  <div >
    <div id="canvasSec">
      <div id="div1">
        <canvas id="can1" (click)="getDetails(chart)"></canvas>
      </div>
    </div>
  </div>
  <div >
    <table>
        <th>Header</th>
        <tr>
          <th> Header 1</th>
          <th> Header 2</th>
          <th> Header 3</th>
          <th> Header 4</th>
          <th> Header 5</th>
          <th> Header 6</th>
          <th> Header 7</th>
        </tr>
      </table>
  </div>
</div>

Codepen: https://codepen.io/bigLuke09/pen/vVEpao

Upvotes: 1

Related Questions