Ensure that the column remains positioned to the right side of the page (float-right)

https://i.sstatic.net/TBjL6.png I am facing an issue with a three-column layout in one row. Each column is lg-6, but the last column ends up below the other two columns when there is more content in Column 2 than Column 1. The last column (Column 3) is floated to the right but is being moved to the left when Column 2 expands beyond Column 1. Is there a way to ensure that Column 3 stays aligned to the right regardless of the content in Column 2?

https://i.sstatic.net/dYNZo.png

<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>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Avoid using float property, opt for d-flex in the parent container.

Add ml-auto to column 3 as well.

...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble retrieving the text from a selected item in a Bootstrap Dropdown Menu using React and Jquery

Check out this Bootstrap 4 code snippet featuring a dropdown menu: <div className="btn-group show"> <button className="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" data ...

jqueryreactjsdrop-down-menubootstrap-4

Utilize a fresh function in Angular to retrieve and store data from a URL into a variable

Currently, I am attempting to utilize Angular in order to retrieve data from a link upon clicking a button. As a newcomer to Angular with only 2 days experience, my knowledge is quite limited. What I aim to achieve is triggering the loading of JSON data w ...

htmlangulartypescript

The final item in the navigation bar is off-center

After centering all text within the li tags, the last one appears to be slightly closer to the bottom. Below is the code snippet along with an image: *{ margin:0; padding:0; box-sizing:border-box} #hamburgerClick{ displa ...

css

Setting a variable for a JavaScript function to insert a video - a step-by-step guide

Here is a grid structure that I am working with: <div class="main"> <ul id="og-grid" class="og-grid"> <li> <a href="http://..." data-video="my-url" data-largesrc="images/1.jpg" data-title="Title" data-descript ...

javascriptjqueryhtml

There appears to be an empty void on the website

If you could kindly click on this link & use CTRL + F to search for the text "Info", you will see a visual representation similar to the image below. There seems to be quite a bit of empty space below these texts. I experimented with padding, display: ...

htmlcss

Modify background image upon hovering using AngularJS

I cannot seem to make the background images of my divs change. Despite trying various options, none of them have been successful. Here's an example of my code: <div ng-controller="mainController" class="main"> <div ng-repeat="land in lan ...

javascripthtmlangularjs

Use CSS to apply hover effects to multiple sections of text at the same time

Is there a way in CSS to apply the hover state to one part of HTML text when another part is hovered over, both sharing the same class? I have a block of text in HTML that is broken down into individual words, each word linked to a specific CSS class. It ...

htmlcss

Gathering Servlet details from non-form elements

I am currently in the process of developing an application that is capable of parsing JSON strings. At this stage, I am able to input a JSON string using Java, write it to an HTML document, and then have a JavaScript program read and parse it before ultima ...

javascriptjavahtmljsonservlets

Timer counting down displayed in individual rows of a datatable

How can I implement a countdown timer for each row in a datatable using js, html, and jquery? Currently, I have successfully created a countdown timer but am unsure how to assign this timer to all rows of the datatable. In my code below, you can see that ...

javascriptjqueryhtmldatatablescountdown

Enhance Bootstrap typeahead to accommodate multiple values

I have a basic typeahead setup for searching city names. However, upon selecting a city, I also need to retrieve its latitude and longitude in order to send that data to the backend. $('.typeahead').typeahead({ minLength : 3, source : ...

javascriptjqueryhtmljsontwitter-bootstrap

What is the best way to center my navigation bar without interfering with the mobile version's JavaScript functionality?

Just starting out with web development and stack overflow, so please bear with me if I struggle to explain the issue. I came across some JavaScript to make my website responsive on small screens (mobiles). However, I am having trouble centering my top nav ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

What is the best way to align the content of a <ul> in the center while keeping the text left-aligned and setting a max-width

UPDATE: Including an image for better visualization: [![Check out the image link][1]][1] To understand more clearly, refer to this fiddle: https://jsfiddle.net/c7jazc9z/2/ Currently, I have a list with items aligned to the left. The goal is to center th ...

htmlcss

Ensure that the text is contained within a div element with a border-radius of 100%

Is there a way to set text inside a div with a border-radius of 100% in a circular shape? I have paragraphs and ul li's within the div, but the text goes outside the borders. How can I wrap the text within the curved edges of the div? ...

htmlcss

Filling Dropdown Options with Data from PostgreSQL

I've been attempting to create a dropdown list for an HTML form that is populated from a PostgreSQL table column. However, being new to this, I haven't been able to get it to work successfully. I have some code that I've been studying and tr ...

phphtmlpostgresql

Submitting hidden values and multiple values with checkboxes in HTML

Is there a way to link multiple form fields with one checkbox for submission? For example: <input type=hidden name=code value="cycle_code" /> <input type=checkbox name=vehicle value="cycle" /> <input type=hidden name=code value="car_code" ...

javahtmljspcheckbox

Unusual CSS inconsistencies between running on VS Web Server and IIS

My current dilemma involves a discrepancy in the appearance of my site when viewed locally through the visual studio web server (http://localhost:3452/) compared to when accessed on IIS7 (http://server/myproject/). Initially, I suspected a CSS issue causi ...

htmlcssvisual-studiobehavior

Why isn't the externally loaded JS file executing properly?

My javascript code functions properly when it's embedded within the HTML file. However, I encounter issues when I try to import it externally. The Google Developer Tools indicate that the file has been loaded successfully, but there seems to be no vis ...

javascripthtml

When attempting to load a CSS file, Java automatically redirects to the login page

EDIT** After successfully loading CSS, I encountered an issue where the page kept redirecting back to login.jsp instead of displaying the CSS. Any insights on what might be causing this?https://i.sstatic.net/Ij7Oh.png I attempted to incorporate a custom ...

javahtmlcssjsp

Is it possible to have animations play in reverse once they have completed running?

Hi there! I'm currently tinkering with the transitioning animations for my navigation button. I've successfully implemented the opening animation where the three bars morph into a single line and the menu slides out. Now, I'm looking to crea ...

javascripthtmlcss

PubNub: Despite the value of the DOM element changing, the visual appearance remains the same

I am currently in the process of developing a test application on an Android phone that retrieves JSON data through AJAX from a Rails server. I have successfully implemented real-time push functionality between the Rails server and the Android device using ...

jqueryhtmlpubnub