You can simply use display:flow-root; property for rich-text class.
body {
margin: 0px;
background-color: #ffffff;
color: #333333;
font-family: 'Trebuchet MS', 'Fira Sans', sans-serif;
}
.rich-text{
display:flow-root;
}
/* Override Bootstrap/Normalize defaults */
h1, .h1 {
font-size: 24px;
}
#titlearea {
text-align: center;
}
#titlearea h1 {
margin-top: 1.0rem;
margin-bottom: 1.0rem;
}
.bio-image {
width: 38%;
}
@media (min-width:768px) {
}
@media (min-width:992px) {
.split2columns {
-webkit-column-count: 2;
-webkit-column-gap: 20px;
-moz-column-count: 2;
-moz-column-gap: 20px;
column-count: 2;
column-gap: 20px;
min-height: 0;
}
}
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Padding Overflow</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i&subset=cyrillic,cyrillic-ext,greek,latin-ext">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body class="zmso-public">
<div class="container">
<div id="titlearea">
<div class="row">
<div class="d-md-none col-8 offset-2">
<img width='100%' src="https://i.postimg.cc/v83szFQ9/image360x540.jpg"/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-10 offset-xl-1">
<h1 class="text-center text-md-left">Title</h1>
</div>
</div>
</div>
<div id="infoarea">
<div class="row">
<div class="split2columns col-xs-12 col-xl-10 offset-xl-1">
<span class="d-none d-md-inline float-md-left pr-md-3 pb-md-3 bio-image"> <img width='100%' src="https://i.postimg.cc/v83szFQ9/image360x540.jpg"/></span>
<div class="rich-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget nullam non nisi est sit amet facilisis magna. Suspendisse ultrices gravida dictum fusce ut placerat. Tellus in metus vulputate eu scelerisque. Fermentum iaculis eu non diam phasellus vestibulum lorem sed. Non sodales neque sodales ut etiam sit amet. Et ligula ullam corpera futis.</p><p>Non consectetur a erat nam at lectus urna. Dignissim sodales ut eu sem integer vitae justo. Mi in nulla posuere sollicitudin aliquam ultrices. Sed sed risus pretium quam vulputate.</p><p>Id diam vel quam elementum. Eu non diam phasellus vestibulum lorem. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis.</p></div>
</div>
</div>
</div>
</div>
</body>
</html>
I’m trying to set up an image and text so that for very wide viewports the text is set in two columns with the image floated in the first column. It all works fine when there is plenty of text, but when there isn’t, there are circumstances where a gap appears in the text at the top of the second column. It looks like the image padding is somehow flowing into the second column, as illustrated below: 
Obviously I don’t want that gap.
Changing the padding-bottom on the image can appear to fix the problem, but then it just reappears a bit differently on other devices. A more fundamental fix is required.
CSS isn’t my strong suit but I’ve spent ages trying to find references to problems like this and managing padding and overflow, all so far to no avail. Any tips would be appreciated.
body {
margin: 0px;
background-color: #ffffff;
color: #333333;
font-family: 'Trebuchet MS', 'Fira Sans', sans-serif;
}
/* Override Bootstrap/Normalize defaults */
h1, .h1 {
font-size: 24px;
}
#titlearea {
text-align: center;
}
#titlearea h1 {
margin-top: 1.0rem;
margin-bottom: 1.0rem;
}
.bio-image {
width: 38%;
}
@media (min-width:768px) {
}
@media (min-width:992px) {
.split2columns {
-webkit-column-count: 2;
-webkit-column-gap: 20px;
-moz-column-count: 2;
-moz-column-gap: 20px;
column-count: 2;
column-gap: 20px;
min-height: 0;
}
}
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Padding Overflow</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i&subset=cyrillic,cyrillic-ext,greek,latin-ext">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body class="zmso-public">
<div class="container">
<div id="titlearea">
<div class="row">
<div class="d-md-none col-8 offset-2">
<img width='100%' src="https://i.postimg.cc/v83szFQ9/image360x540.jpg"/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-10 offset-xl-1">
<h1 class="text-center text-md-left">Title</h1>
</div>
</div>
</div>
<div id="infoarea">
<div class="row">
<div class="split2columns col-xs-12 col-xl-10 offset-xl-1">
<span class="d-none d-md-inline float-md-left pr-md-3 pb-md-3 bio-image"> <img width='100%' src="https://i.postimg.cc/v83szFQ9/image360x540.jpg"/></span>
<div class="rich-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget nullam non nisi est sit amet facilisis magna. Suspendisse ultrices gravida dictum fusce ut placerat. Tellus in metus vulputate eu scelerisque. Fermentum iaculis eu non diam phasellus vestibulum lorem sed. Non sodales neque sodales ut etiam sit amet. Et ligula ullam corpera futis.</p><p>Non consectetur a erat nam at lectus urna. Dignissim sodales ut eu sem integer vitae justo. Mi in nulla posuere sollicitudin aliquam ultrices. Sed sed risus pretium quam vulputate.</p><p>Id diam vel quam elementum. Eu non diam phasellus vestibulum lorem. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis.</p></div>
</div>
</div>
</div>
</div>
</body>
</html>
You need to get the result window wide enough to show the problem. It is easier to see this in the JSFiddle at https://jsfiddle.net/nhsyuqac/. For me (on a Mac) it appears on Firefox when the result window wider than 1200px, with Chrome wider than 992px (though the exact font, font size and line-height will affect this – it behaves a little differently natively in the browser compared with inside JSFiddle.)
Thanks Rishabh, that appears to work on Firefox, but makes it worse on both Chrome and Safari – the gap now extends the full height of the second column, like an ultra-wide gutter.
Sorry, I used the print term for the gap between columns. Yes, I mean the gap between the columns in Chrome and Safari are now much wider – probably the image width plus the intended gap. See
I tried that. First of all, I placed the .rich-text CSS in the media query alongside .split2columns as 400px was too narrow for smaller screens. Even 400px is too narrow for the two columns on wider screens, and I found that as I increased it to about 450px – where it should be – the problem reoccurred. Exact break points were 428px for Firefox, 439px for Chrome. At these points the text is subtly being re-packed, and I can see the column heights changing too. I suspect that is causing the problem. Given I can’t control the text content, I can’t see that this is a solution to my problem.
