0

This is how it should be I've got three columns in one row. Each column is lg-6, which makes the last column span below the other two. This column is placed to the right using float-right. But whenever the column above the last column (Column 2) gets more content than the first column, the last column (Column 3) are moved to the left (as showed in the photo below). Is there any way to prevent the column being moved like this? Force it to stay right.

Columnt moved to the left

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row d-md-block mt-4 mx-n3 px-4">
        <div class="card col-lg-6 col-sm-12 mx-n1 float-left">
            <div class="card-header screensCardHeader">
                <h4 class="m-0 font-weight-bold text-header">Column 1</h4>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="table_0_view" class="table" width="100%" cellspacing="0">
                        <thead class="screensThead">
                            <tr>
                                <th>#</th>
                                <th>Namn</th>
                            </tr>
                        </thead>
                        <tbody id="tbody_0_view" class="screenstable screenstableque">
                            
                            <tr id="2" sport="0" class="screenstablerow">
                                <td class="viewtd row-id-0">1</td>
                                <td>Person 1</td>
                            </tr>
                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        
        <div class="card col-lg-6 col-sm-12 mx-n1 float-right order-1">
            <div class="card-header screensCardHeader">
                <h4 class="m-0 font-weight-bold text-header">Column 2</h4>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="table_1_view" class="table" width="100%" cellspacing="0">
                        <thead class="screensThead">
                            <tr>
                                <th>#</th>
                                <th>Namn</th>
                            </tr>
                        </thead>
                        <tbody id="tbody_1_view" class="screenstable screenstableque">
                            
                            <tr id="3" sport="1" class="screenstablerow">
                                <td class="viewtd row-id-1">1</td>
                                <td>Person 2</td>
                            </tr>
                            <tr id="4" sport="1" class="screenstablerow">
                                <td class="viewtd row-id-1">1</td>
                                <td>Person 3</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        
        <div class="card col-lg-6 col-sm-12 mx-n1 float-right justify-content-end">
            <div class="card-header screensCardHeader">
                <h4 class="m-0 font-weight-bold text-header">Column 3</h4>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="table_2_view" class="table" width="100%" cellspacing="0">
                        <thead class="screensThead">
                            <tr>
                                <th>#</th>
                                <th>Namn</th>
                            </tr>
                        </thead>
                        <tbody id="tbody_2_view" class="screenstable screenstableque">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
dippas
  • 58,591
  • 15
  • 114
  • 126
hrdy
  • 128
  • 1
  • 1
  • 9

1 Answers1

1

Don't use float property, instead use d-flex in the parent.

And use ml-auto in column 3

UPDATE - regarding OP comments

But this means that Column 1 will follow the height of column 2 right? Is there any way to hide the whitespace appearing in Column 1 when adding stuff in column 2 then?

Answer: use align-items-start in the row div

Also, the spacing between right and left column seems to disappear. I used a negative margin of 1 with mx-n1 earlier. Any way to get this back while using d-flex? Used according to documentation of last bootstrap, negative margin: getbootstrap.com/docs/4.5/utilities/spacing

Answer: Use the card utility class inside of col-*-* instead of using it along with

N.B. : width and cellspacing attributes are deprecated

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row d-flex mt-4 px-4 align-items-start">
    <div class="col-lg-6 col-sm-12 mb-4">
      <div class="card">
        <div class="card-header screensCardHeader">
          <h4 class="m-0 font-weight-bold text-header">Column 1</h4>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table id="table_0_view" class="table">
              <thead class="screensThead">
                <tr>
                  <th>#</th>
                  <th>Namn</th>
                </tr>
              </thead>
              <tbody id="tbody_0_view" class="screenstable screenstableque">

                <tr id="2" sport="0" class="screenstablerow">
                  <td class="viewtd row-id-0">1</td>
                  <td>Person 1</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-6 col-sm-12 mb-4">
      <div class="card">
        <div class="card-header screensCardHeader">
          <h4 class="m-0 font-weight-bold text-header">Column 2</h4>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table id="table_1_view" class="table">
              <thead class="screensThead">
                <tr>
                  <th>#</th>
                  <th>Namn</th>
                </tr>
              </thead>
              <tbody id="tbody_1_view" class="screenstable screenstableque">

                <tr id="3" sport="1" class="screenstablerow">
                  <td class="viewtd row-id-1">1</td>
                  <td>Person 2</td>
                </tr>
                <tr id="4" sport="1" class="screenstablerow">
                  <td class="viewtd row-id-1">1</td>
                  <td>Person 3</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>


    <div class="col-lg-6 col-sm-12 ml-auto mb-4">
      <div class="card">
        <div class="card-header screensCardHeader">
          <h4 class="m-0 font-weight-bold text-header">Column 3</h4>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table id="table_2_view" class="table">
              <thead class="screensThead">
                <tr>
                  <th>#</th>
                  <th>Namn</th>
                </tr>
              </thead>
              <tbody id="tbody_2_view" class="screenstable screenstableque">
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
dippas
  • 58,591
  • 15
  • 114
  • 126
  • But this means that Column 1 will follow the height of column 2 right? Is there any way to hide the whitespace appearing in Column 1 when adding stuff in column 2 then? – hrdy Nov 14 '20 at 18:24
  • Also, the spacing between right and left column seems to disappear. I used a negative margin of 1 with mx-n1 earlier. Any way to get this back while using d-flex? Used according to documentation of last bootstrap, negative margin: https://getbootstrap.com/docs/4.5/utilities/spacing/ – hrdy Nov 14 '20 at 18:26
  • Thank you so much! The updates answer fixed all problems. But in the end it introduced another problem. Please see the updated photo in my initial post. Since Column 3 follows column 1 when something is added to it, if column 1 is filled then column 3 will disappear down below the overflow. Is there any way to keep Column 3 stationary below Column 2? Or is this expected when using d-flex? – hrdy Nov 15 '20 at 01:35
  • You are looking for [masonry layout](https://stackoverflow.com/questions/44377343/css-only-masonry-layout) – dippas Nov 15 '20 at 01:54