What is the best way to prevent the contents of the First Column from spilling over into the Second Column using CSS

Currently, I am working on the CSS for two column sections: section one and section two. My goal is to have the first column of section one occupy the available space without overflowing into the second column, as illustrated in this image.

The content highlighted in red should remain within Section One's column. When previewing the document for printing, there appears to be excess free space below Section One's column that should not overflow into Section Two's column at all.

.two-column {
  -webkit-columns: 100px 2;
  /* Chrome, Safari, Opera */
  -moz-columns: 100px 2;
  /* Firefox */
  columns: 100px 2;
  -webkit-column-gap: 40px;
  /* Chrome, Safari, Opera */
  -moz-column-gap: 40px;
  /* Firefox */
  column-gap: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js" crossorigin="anonymous"></script>

<div class="container">
  <div class="two-column">
    <div class="row">
      <!-- SECTION ONE -->
      <h1>Section One</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
      </p>
      
 <p> (content continues...) </p> 

    </div>
    <div class="row">
      <!-- SECTION TWO -->
      <h1>Section Two</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui vel quia, facere numquam vitae atque, neque doloremque cumque eos porro. Dolorum hic iusto quo, numquam eius magnam illum dignissimos id.
      </p>
    </div>
  </div>
</div>

I am aware that another method like using flex-box side by side could solve this issue, but I specifically need to achieve it using only CSS Column Style. Any suggestions on how to accomplish this would be greatly appreciated. Thank you!

htmlcss

Answer №1

This code snippet demonstrates a simple implementation of a 2-column layout using flexbox. The class row is utilized from Bootstrap, which may cause conflicts with custom CSS styles.

.my-row {
  display: flex;
  flex-wrap: wrap;
}

.my-col {
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}
<div class="my-row">
  <div class="my-col"> Insert content for first column here </div>
  <div class="my-col"> Insert content for second column here </div>
</div>

Creating a 2-column layout without overflow

.my-row {
  display: flex;
  flex-wrap: wrap;
}

.my-col {
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  background-color: gray;
  margin: 3px;
}
<div class="my-row">
  <div class="my-col">
    <!-- SECTION ONE -->
    <h1>Section One</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </p>
    <p>
      Additional content for the first column can be added h...
    </p>
    ...
    <p>
      More text to fill up the space and demonstrate the colu...
    </p>
  </div>
  <div class="my-col">
    <!-- SECTION TWO -->
    <h1>Section Two</h1>
    <p>
      Another set of placeholder text for the second column....
    </p>
    <p>
      A continuation of the second column's content area wit...
    </p>
    ...
  </div>
</div>

Updated solution based on user feedback (CSS modification only)

.two-column {
  display: flex !important;
  flex-wrap: wrap !important;
}

.two-column .row {
  flex-basis: 0 ;
  -ms-flex-positive: 1 ;
  flex-grow: 1 ;
  max-width: 100%;
  display:block;
  margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js" crossorigin="anonymous"></script>

<div class="container">
  <div class="two-column">
    <div class="row">
      <!-- SECTION ONE -->
      <h1>Section One</h1>
      <p>
        Placeholder text for first column...
      </p>
      <p>
        Additional information to populate the first column d...
      </p>
      ...
    </div>
    <div class="row">
      <!-- SECTION TWO -->
      <h1>Section Two</h1>
      <p>
        More filler content for the second column...
      </p>
      <p>
        Continuing with the content in the second column...
      </p>
      ...
    </div>
  </div>
</div>

Answer №2

It appears that the issue lies in improper utilization of bootstrap classes. With Bootstrap, the default orientation of the Row class is horizontal, allowing for defining column width using the col-md-6 class (Half of width).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js" crossorigin="anonymous"></script>

<div class="container">
<div class="row">
<div class="col-md-6">
      <!-- SECTION ONE -->
      <h1>Section One</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
      </p>
    </div>
    <div class="col-md-6">
      <!-- SECTION TOW -->
      <h1>Section Two</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui vel quia, facere numquam vitae atque, neque doloremque cumque eos porro. Dolorum hic iusto quo, numquam eius magnam illum dignissimos id.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui vel quia, facere numquam vitae atque, neque doloremque cumque eos porro. Dolorum hic iusto quo, numquam eius magnam illum dignissimos id.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui vel quia, facere numquam vitae atque, neque doloremque cumque eos porro. Dolorum hic iusto quo, numquam eius magnam illum dignissimos id.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui vel quia, facere numquam vitae atque, neque doloremque cumque eos porro. Dolorum hic iusto quo, numquam eius magnam illum dignissimos id.
      </p>
    </div>
</div>
</div>
</body>

Answer №3

You can easily achieve this using Bootstrap Grid. Check out the Bootstrap Grid documentation with the class col-lg-6

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js" crossorigin="anonymous"></script>

<div class="container">

    <div class="row">
    <div class="col-lg-6">

      <!-- SECTION ONE -->
      <h1>Section One</h1>
      <p>
        ...Lorem ipsum text...
      </p>
      <p>
        ...More Lorem ipsum text...
      </p>
      <p>
        ...Even more Lorem ipsum text...
      </p>
      <p>
        ...Additional Lorem ipsum text...
      </p>
    </div>

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

      <!-- SECTION TWO-->
      <h1>Section Two</h1>
      <p>
        ...Different Lorem ipsum text...
      </p>
      <p>
        ...More different Lorem ipsum text...
      </p>
      <p>
        ...Even more different Lorem ipsum text...
      </p>
      <p>
        ...Additional different Lorem ipsum text...
      </p>
    </div>

    </div>
</div>

Answer №4

To create a flexible layout with items arranged horizontally and wrapping to the next line as needed, you can use the following CSS code: display: flex; flex-flow: row wrap;

Section One

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Section Two

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Answer №5

To prevent overflow of data from being visible, consider using the CSS style "overflow: hidden".

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

Creating a scrollable table with CSS: A step-by-step guide

My table has too many columns causing it to exceed the width of the screen. I would like to make it scrollable horizontally for a neater and more organized appearance. I believe CSS with the overflow hidden property can achieve this, but I am unsure where ...

phphtmlcss

What is the best way to eliminate the final character from a series of repeated Xs and following strings

Data consists of [one][two][three]. I want to exclude the last set of brackets and have a result like [one][two]. How can this be achieved using jQuery? ...

javascriptjqueryhtml

How can I automatically direct my NodeJS application to the login screen?

Here is the setup of my project structure: There is a simple folder called static, within which I have: index.html (the homepage for user registration) login.html (the login page) In the parent folder, there is a file named server.js: // NodeJS code for ...

javascripthtmlnode.jsexpress

Can a YouTube video be triggered to play when a specific CSS style is selected?

I am searching for a method to display and play different YouTube videos based on a selected CSS style from a drop-down menu. I believe JavaScript can be utilized to detect the chosen CSS. Include the following in the html header of the page. <script ...

javascriptcsshtmlyoutubeembed

Ways to select the initial 10 rows, final 3 rows, and middle 2 rows using Javascript

As a newcomer to Javascript, I have a couple of questions: 1) How can I retrieve the first 10 rows, the last 3 rows, and the 2 rows in the center using the code var firstTable = $('#aaa table').eq(0); 2) Is there a way to create and assign new ...

javascriptjqueryhtml

Unable to see or play local mp4 file in Ionic iOS application

I am facing an issue with my Ionic app where I am trying to show a video playing in the background. The Jaeger25 HTMLVideo plugin works perfectly for Android, but when it comes to iOS, the video simply refuses to play. The video file is located in the www/ ...

javascriptioshtmlionic-frameworkhtml5-video

Issues arise when trying to use the Jquery append() method in conjunction with Angular

We are currently utilizing jquery version 1.9.1 and angular version 1.2.13 for our project. Our wysiwyg editor is functioning well, as we are able to save HTML into the database and load it back using the jquery append function successfully. However, we ar ...

javascriptjqueryhtmlangularjs

limitation in bootstrap ensures that only one collapse element is open at any

Hey, can someone help me fix this code? I'm trying to make it so that only one element opens at a time, but I can't seem to figure out how. Right now, if I click on two elements, they both open and the other one doesn't close. This is what ...

javascripthtmlbootstrap-4

Is it necessary to set required input if the db column can be NULL?

Is there a way to dynamically add the "required" attribute (HTML5) to an input if the chosen column cannot be null in PHP? Here's an example of what I'm trying to achieve: $result = mysqli_query($db, "SELECT * FROM table"); while($row = mysqli ...

phpmysqlsqlhtml

Adapting iFrame height to accommodate fluctuating content height in real time (details included)

I have an embedded iframe that contains a form with jQuery validation. When errors occur, the content height of the iframe increases dynamically. Below is the script I use to adjust the height of my iframe based on its content: function doIframe(){ o = d ...

javascriptjqueryhtmliframe

Adjust the width of a DIV based on the content of other DIVs, and float and center them all

Initially, what seemed like a simple task has turned out to be more complicated than I anticipated. Here is my code: <html> <head> <style> div { border-top: 1px solid black; margin: 10px; } div#all { border: 0; } </style> <body ...

htmlwidthcss

Having trouble locating the existing placeholder in my WordPress theme that I'm trying to change

I am currently using the KuteShop WordPress Woo-commerce template and I want to customize the Placeholder Text "I'm searching for..." and "All Cate." shown in the image below: Despite my efforts, I have been unable to locate where I can make these ch ...

phphtmlwordpress

The entire title serves as a hyperlink, not just the text portion

Apologies if I'm making mistakes, I'm just starting out with coding and navigating this website. So here's the deal: I am trying to add advertisements to my website on the left and right sides of the centered "Logo" at the top. The issue i ...

htmlcssheader

What are the Functions of Ctrl-K on Stack Overflow?

I'm intrigued by how to incorporate the Ctrl+K (code sample) feature for code. For example: public static void main(String args[]){ System.out.println.out("welcome"); } Is there a way to nicely format this? Do we need any specific package to ...

javascriptcsscode-formatting

The dropdown in MaterializeCSS does not display any data retrieved from VUE

Good evening. I am currently utilizing VUE along with MaterializeCSS. I have been trying to populate a selection menu without success. Although I am receiving the data from the database correctly, the options in the select tag remain blank when using V-F ...

cssvue.jsdrop-down-menumaterialize

Modifying an HTML list item to become 'active' in a navigation bar

One way I've been implementing my navbar on each page is by using the following code at the bottom of the page within script tags: $("#navbar-partial").load("navbar.html). The code for the navbar list looks like this: <ul id="main-nav" class="nav ...

javascriptjqueryhtmlcsstwitter-bootstrap

Custom Component in React Bootstrap with Overflowing Column

I am working on a custom toggle dropdown feature in my React application: import React from 'react'; import 'react-datepicker/dist/react-datepicker.css'; const DateRange = props => ( <div className="dropdown artesianDropdo ...

javascripthtmlcsstwitter-bootstrapreactjs

Turn off automatic compilation for LESS styling

In my Eclipse environment, I am looking to have LESS compile only when explicitly triggered by mvn package. Currently, any changes made in my less file immediately update the CSS. How can I prevent this automatic behavior? <plugin> <groupId> ...

csseclipsemavenless

Adjusting Font Size for Buttons on Mobile Devices in HTML

I am currently working on a website that I want to ensure is mobile-friendly. When testing it on my phone and in Chrome's device mode, I noticed that the majority of the text on the screen was displayed at an easily readable size without needing to zo ...

htmlcss

Instructions for adding an onfocus event listener to an input field in order to dynamically change the formatting of associated labels

I'm looking to change the style of my input labels to a more fancy look by implementing the .fancyclass style when using the onfocus event on the input field. I am curious to know how this can be achieved through event listeners in Javascript? ...

javascripthtmlformseventsdom-events