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.

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

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

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

.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

Custom Tooltips arrow is not receiving the CSS styling

I have implemented ReactTooltip from the ReactTooltip library You can view an example here Component Setup <ReactTooltip className={styles.customTheme} id={id} place={placement} effect="solid"> {children} </ReactTooltip> Stylin ...

javascriptcssreactjssasstooltip

I am struggling to move my dropdown list in HTML and CSS

I'm having trouble adjusting the position of a dropdown list on my website using CSS. Can someone help me move the dropdown list to the center? HTML Code: <header> <h1 id="my_cycle_head">MY CYCLE</h1> <ul id= ...

htmlcss

How to locate the position of a specific word on a webpage using jQuery

In my div, I am struggling to search like an editor. Despite multiple attempts, I have not found a solution yet. Can someone please advise me on how to resolve this issue? <div id="content"> <p> Lorem Ipsum is simply dumm ...

javascriptjqueryhtml

Having trouble with my unique 404 page templates not functioning properly in Django

I'm having trouble implementing my custom 404 and 403 error pages for my Django project. I've previously used the same code in other projects, but it's not functioning as expected this time. Here is the function I am using: def error_404(re ...

pythonhtmldjangohttphttp-status-code-404

html form submission error - please refresh

After submitting a form on my page, I keep encountering an error every time I try to refresh the page. I've attempted several solutions that I came across online, but none of them have resolved the issue as I continue to face this error on different ...

javascriptjqueryhtml

Achieving proper variable-string equality in Angular.js

In my Angular.js application, I am utilizing data from a GET Request as shown below. var app = angular.module('Saidas',[]); app.controller('Status', function($scope, $http, $interval) { $interval(function(){ ...

javascripthtmlangularjs

The swipe function of Hammer.js is unable to detect gestures on a rotated iframe

After creating a rotated iframe on the page using CSS transforms, I attempted to implement swipe events within the iframe. body.rotate iframe { transform: rotate(90deg); transform-origin: top right; position: absolute; t ...

javascripthtmlcssiframehammer.js

Issue with closing the active modal in Angular TypeScript

Can you help me fix the issue with closing the modal window? I have written a function, but the button does not respond when clicked. Close Button: <button type="submit" (click)="activeModal.close()" ...

htmlangulartypescript

What steps can I take to enhance the responsiveness and overall performance of this code using bootstrap?

Struggling with making your website responsive? No worries, we've all been there. Whether you're a pro at coding in react.js and vue.js or a complete beginner, we all need to start somewhere. Any suggestions or tips on how to improve responsivene ...

htmlcssbootstrap-4

Blazor components experience element interaction while utilizing more than one instance of Blazorise.Bootstrap component

I am facing an issue in my Blazor app where a component with a button and bootstrap collapse works fine when used once on a page, but triggers collapse elements in other instances when used multiple times. This seems to be happening because their IDs are s ...

c#htmlbootstrap-4blazor-server-sideblazorise

The repetition of the react nodejs page load occurs when the get method is utilized

I've successfully set up a page and function for loading the customer list. However, I'm facing an issue where adding the get method to my code results in it being called every time information is received from the URL and the page is rendered. i ...

javascripthtmlnode.jsreactjshttp-post

How can CSS be used to center multi-line text with the shortest line appearing at the top

I'm currently working on some html and css code that looks like this: <div style="width: 40em; text-align: center;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard du ...

htmlcsstextalignment

Pick the final offspring of the HTML element that is not assigned to a specific class

Currently, I am attempting to target the final element of a child that lacks a specific class. You can view my progress on this JSFiddle. <aside class="col2"> <div class="infobox teal"></div> <div class="infobox mediumbrown"&g ...

jquerycss

What is the process for adding information to datatables using jQuery?

I have been struggling to make a data table in jQuery function correctly. I am able to append data to the table, but the sorting, pagination, and search features are not working. Even though the data is visible in the table, it shows as 0 records. I am wor ...

javascriptjqueryhtmldatatables

What is the best way to integrate Sass into my CSS?

Currently, I am diving into the world of Sass and I am truly impressed by its simplicity. However, I have encountered a hurdle when it comes to compiling and importing my styles. Whenever I look at my style.css file, I notice that it includes not only the ...

csstwitter-bootstrapsasscompass-sass

How is it possible that this component is able to work with slotting without needing to specify the slot name

I have created two Web Components using Stencil.js: a Dropdown and a Card. Within my Dropdown, the structure is as follows: <div class='dropdown'> <slot name="button"/> <slot/> </div> The nested chil ...

javascripthtmlstenciljsslotslots

Unable to connect HTML data to the view section using angular.js

I am trying to incorporate some HTML content into my view using angular.js. time.html: <table class="table table-bordered table-striped table-hover" id="dataTable"> <tr> <td width="100" align="center">Time <i class="fa fa-long- ...

javascripthtmlangularjs

Transforming traditional HTML table layout to modern div structure

We are currently in the process of transitioning old pages from our previous website structure, which used tables, to our new layout based on DIVs. Our website is structured using a PHP include system with separate components for the header, body, and foot ...

phpcsshtml-table

Prevent clicks from passing through the transparent header-div onto bootstrap buttons

I have a webpage built with AngularJS and Bootstrap. It's currently in beta and available online in (German and): teacher.scool.cool simply click on "test anmelden" navigate to the next page using the menu This webpage features a fixed transparent ...

javascriptcssangularjstwitter-bootstrap

What is the best way to assign two styles with the same value in a single line of code?

Can you suggest a simpler method for expressing left:15%;right:15%, such as using left,right:15% or something equivalent? Your assistance is greatly appreciated! ...

css