Ways to eliminate the gap between two columns within a row, where the third column begins directly after the second one, causing a significant gap

Question

Ways to eliminate the gap between two columns within a row, where the third column begins directly after the second one, causing a significant gap

I am facing an issue with the layout of my columns within a row. I have two columns inside the row and another column outside of the first row.

The problem is that the third column (col-3) starts at the end of col-1, causing a gap between col-1 and col-3 in desktop mode. This gap keeps expanding as big as col-2 is. How can I adjust this so that col-3 does not start after col-2's height, eliminating the large space between col-1 and col-3?

Here is how it currently looks:

|col-1  ||col-2|
|       ||     |
 ------- |     |
         |     |
---------
col-3
---------

This is how it should look instead:

|col-1  ||col-2|
|       ||     |
 ------- |     |
col-3    |     |
---------|     |

I have tried placing all columns inside one row and using order-first and order-last attributes without success. Here is my code snippet:

<div class="row">
  <div class="col-md-8">
   col-1
  </div>
  <div class="col-md-4"> 
     col-2
  </div>
  <div class="col-md-8 pull-left">
       col-3
  </div>
</div>

The expected result is for there to be no space after col-1 with col-2, ensuring that col-3 does not start after col-2's height. Any suggestions on how to achieve this would be appreciated.

html css bootstrap-4

Answer 1

Answer №1

If you're looking to solve this problem, I recommend utilizing the bootstrap flex CSS as it offers a more straightforward solution. Below is a sample code snippet that may help address your issue:

HTML

<div class="flex-row">
  <div class="flex-column">
    <div class="col-md-8 red">
      Column 1
    </div>
    <div class="col-md-8 red">
      Column 2
    </div>
  </div>
  <div class="col-md-4 green">
    Column 3
  </div>
</div>

CSS

.flex-row {
  display: flex;
  flex-direction: row;
}

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

.red {
  background: red;
  padding: 10px;
}

.green {
  background: green;
  padding: 10px;
}

For further reference and experimentation, check out this JS Fiddle link: https://jsfiddle.net/SJ_KIllshot/pqtxL9bs/

Answer 2

If you're looking to solve this problem, I recommend utilizing the bootstrap flex CSS as it offers a more straightforward solution. Below is a sample code snippet that may help address your issue:

HTML

<div class="flex-row">
  <div class="flex-column">
    <div class="col-md-8 red">
      Column 1
    </div>
    <div class="col-md-8 red">
      Column 2
    </div>
  </div>
  <div class="col-md-4 green">
    Column 3
  </div>
</div>

CSS

.flex-row {
  display: flex;
  flex-direction: row;
}

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

.red {
  background: red;
  padding: 10px;
}

.green {
  background: green;
  padding: 10px;
}

For further reference and experimentation, check out this JS Fiddle link: https://jsfiddle.net/SJ_KIllshot/pqtxL9bs/

Answer 3

Answer №2

UPDATE

Check out this example of using flexbox on YouTube. Feel free to optimize the CSS code.

View on CodePen

https://codepen.io/matrixme/pen/wbqvZb

HTML Structure


    <div class="container">
        <div class="col--one">
            <div class="row video">
                <h2>Video</h2>
            </div>
            <div class="row forum">
                <h2>Forum</h2>
                <ul>
                    <li class="thread"></li>
                    <li class="thread"></li>
                    <li class="thread"></li>
                </ul>
            </div>
        </div>
        <div class="col--two">
            <h2>Related</h2>
            <ul>
                <li class="thumbnail">

                </li>
                <li class="thumbnail">

                </li>
                <li class="thumbnail">

                </li>
                <li class="thumbnail">

                </li>
            </ul>
        </div>
    </div>

CSS Styles

body {
  width: 100vh;
  margin: 0;
  top: 0;
  height: auto;
  background-color: #323232;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: flex-start;
}

h2 {
  width: 100%;
  text-align: center;
  font-size: 30px;
  font-weight: 300;
  font-family: Arial, sans-serif;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: flex-start;
  width: 70%;
  background-color: #F2F2F2;
}

.col--one {
  position: relative;
  width: 70%;
  height: 100vh;
  background-color: #F2F2F2;
}

.col--two {
  position: relative;
  width: 30%;
  height: auto;
  background-color: #F2F2F2;
  border-left: 1px solid #CCCCCC;
}

.row {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.video {
  position: relative;
  height: 350px;
  background-color: #EEEEEE;
}

.forum {
  flex-wrap: wrap;
  align-content: flex-start;
  height: 500px;
  background-color: #dddddd;
  position: relative;
}

ul {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  padding: 0;
  list-style: none;
  margin: 0;
}

.thread {
  position: relative;
  height: 50px;
  background-color: #ffffff;
  width: 90%;
}


.thumbnail {
  position: relative;
  height: 200px;
  background-color: #ffffff;
  width: 80%;
  margin-bottom: 20px;
}

Answer 4

UPDATE

Check out this example of using flexbox on YouTube. Feel free to optimize the CSS code.

View on CodePen

https://codepen.io/matrixme/pen/wbqvZb

HTML Structure


    <div class="container">
        <div class="col--one">
            <div class="row video">
                <h2>Video</h2>
            </div>
            <div class="row forum">
                <h2>Forum</h2>
                <ul>
                    <li class="thread"></li>
                    <li class="thread"></li>
                    <li class="thread"></li>
                </ul>
            </div>
        </div>
        <div class="col--two">
            <h2>Related</h2>
            <ul>
                <li class="thumbnail">

                </li>
                <li class="thumbnail">

                </li>
                <li class="thumbnail">

                </li>
                <li class="thumbnail">

                </li>
            </ul>
        </div>
    </div>

CSS Styles

body {
  width: 100vh;
  margin: 0;
  top: 0;
  height: auto;
  background-color: #323232;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: flex-start;
}

h2 {
  width: 100%;
  text-align: center;
  font-size: 30px;
  font-weight: 300;
  font-family: Arial, sans-serif;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: flex-start;
  width: 70%;
  background-color: #F2F2F2;
}

.col--one {
  position: relative;
  width: 70%;
  height: 100vh;
  background-color: #F2F2F2;
}

.col--two {
  position: relative;
  width: 30%;
  height: auto;
  background-color: #F2F2F2;
  border-left: 1px solid #CCCCCC;
}

.row {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.video {
  position: relative;
  height: 350px;
  background-color: #EEEEEE;
}

.forum {
  flex-wrap: wrap;
  align-content: flex-start;
  height: 500px;
  background-color: #dddddd;
  position: relative;
}

ul {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  padding: 0;
  list-style: none;
  margin: 0;
}

.thread {
  position: relative;
  height: 50px;
  background-color: #ffffff;
  width: 90%;
}


.thumbnail {
  position: relative;
  height: 200px;
  background-color: #ffffff;
  width: 80%;
  margin-bottom: 20px;
}

Answer 5

Answer №3

.content {
  background: #999;
  border: 1px solid red;
}

.h50 {
  height: 50%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row eq-height">
    <div class="col-8">
      <div class="h-50 content">Atul</div>
      <div class="h-50 content">Rajput</div>
    </div>
    <div class="col-4">
      <div class="content h-100">Kumar</div>
    </div>  
  </div>
</div>

Instead of writing extensive CSS, you can modify the HTML structure slightly and make use of some simple styling.

Answer 6

.content {
  background: #999;
  border: 1px solid red;
}

.h50 {
  height: 50%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row eq-height">
    <div class="col-8">
      <div class="h-50 content">Atul</div>
      <div class="h-50 content">Rajput</div>
    </div>
    <div class="col-4">
      <div class="content h-100">Kumar</div>
    </div>  
  </div>
</div>

Instead of writing extensive CSS, you can modify the HTML structure slightly and make use of some simple styling.

Ways to eliminate the gap between two columns within a row, where the third column begins directly after the second one, causing a significant gap

Answer №1

Answer №2

Answer №3

Similar questions

Is it acceptable to nest an HTML document within the <body> tag of another HTML document?

How to Dynamically Load SVGs in Angular 10 Without Using IMG or OBJECT Elements

Receive alerts in Swift from WKWebView when a particular screen is displayed in HTML

Scaling down in CSS does not center the element properly using the margin 0 auto technique when the scaled element was larger than the container before scaling

Addressing the delay of "Rasterize Paint" on mobile devices while implementing css3 opacity transitions

Can PHP retrieve data when the form submit function is overridden with AJAX?

The appearance of Bootstrap 4 post cards on my website appear to be distinct

Utilizing a server-side PHP environment alongside a dynamic JQuery slider

Issue with jquery .click function not triggering after CSS adjustment

Could someone explain why Bootstrap columns are positioned in the same row but stacked on top of each other?

Toggle visibility of div content when hovering over a link by leveraging the data attribute, with the div initially visible

Adjusting the tab order dynamically within a navigation menu

What is the best way to ensure my arrow text remains properly positioned when using fullpage.js?

Click on every link to reveal a hidden div

Center the logo within the NavBar

Modify the class of a div element depending on the value of a data attribute

Failure to validate two dates, even when they are both in date format within AngularJS

"Upon invoking the console log, an empty value is being returned when attempting to access the

The Flask server push appears to be functioning correctly, yet the EventSource.onmessage event is not triggering as expected

Upgrading from Vuetify 2 to 3 involves replacing the deprecated styles like .v-application, rounded, and flat with