CSS Float Elements with Unequal Heights Left and Up in Grid

css float elements with unequal heights left and up in grid

You can use the popular library Masonry.

A dynamic layout plugin for jQuery The flip-side of CSS floats

Here is a code example...

$('#container').masonry({
  itemSelector: '.box'
});

Here is the source on Github and an interview with David Desandro on the Shoptalk podcast.

For folks that aren't using jQuery, note that there's also Vanilla Masonry which is the framework-free version.

Tip: Make sure the parent container has position:relative so all the content is bound to your container.

Unexpected behavior of Floating elements with uneven height

You could create two separate classes, one which will float your element to the left, and another which will float your element to the right:

<html>
<head>  <style>    span {      width: 50%;      text-align: center;    }        .float-left {      float: left;      clear: left;    }        .float-right {      float: right;    }  </style>  <meta name="viewport" content="width=device-width"></head>
<body>  <div>    <span class="float-left">I am long text so i may take long space vbjkhkj hkjhjkhjkh jkghkjgk gjhfgjhykf yjf kfgkuyrfkyfkrf ytgk tygy kry kr ykut kutuktuy ruykt kutkuyykut yufkytrky utkt r tykutg kyuyuktykytr ktykuyt,ytktytg kyutukyrtyryrrryryu ryuryuryryu ryuryurtyukrerrukrkr r67rtr87</span>    <span class="float-right">Hello2</span>    <span class="float-left">Hello3</span>    <span class="float-right">Hello4</span>    <span class="float-left">Hello5</span>  </div></body></html>

How to float elements with different heights?

you could just apply a clear to every fifth element to force it to start all the way at the left. I think it would look something like this in css3:

div#wrapper > *:nth-child(4n+1) {
   clear: both;
}

jsFiddle demo

CSS float layout is uneven when responsive

You should use 'clear' to solve this issue
look at the my answer below. it will work fine

.wrap {    width: 80%;    margin-left: auto;    margin-right: auto;}
@media only screen and (max-width: 500px) {.wrap {    width: 90%;    margin-left: auto;    nargin-right: auto;}}
.container {    display: table;    width: 100%;}
.item {    width: 33.3%;    float: left;    margin-bottom: 10px;}
// add this part.item:nth-child(3n + 1) { clear: both;}
@media only screen and (max-width: 500px) {.item {    width: 50%;    float: left;    margin-bottom: 15px;}
// add this part.item:nth-child(3n + 1) { clear: none;}
.item:nth-child(2n + 1) { content: ""; clear: both; display: table;}}
.item-info {    max-width: 90%;    margin-left: auto;    margin-right: auto;    text-align: center;}
.item-icon{    width: 50px;    height: 50px;    background: url(https://via.placeholder.com/50x50) bottom no-repeat;    background-size: contain;    margin-left: auto;    margin-right: auto;

<div class="wrap">   <div class="container">      <div class="item">         <div class="item-icon"></div>         <div class="item-info">            <h1>Title</h1>            <p>A short paragraph goes here</p>         </div>      </div>      <div class="item">         <div class="item-icon"></div>         <div class="item-info">            <h1>Title</h1>            <p>A short paragraph goes here</p>         </div>      </div>      <div class="item">         <div class="item-icon"></div>         <div class="item-info">            <h1>Title</h1>            <p>A short paragraph goes here</p>         </div>      </div>      <div class="item">         <div class="item-icon"></div>         <div class="item-info">            <h1>Title</h1>            <p>A short paragraph goes here</p>         </div>      </div>      <div class="item">         <div class="item-icon"></div>         <div class="item-info">            <h1>Title</h1>            <p>A short paragraph goes here</p>         </div>      </div>      <div class="item">         <div class="item-icon"></div>         <div class="item-info">            <h1>Title</h1>            <p>A short paragraph goes here</p>         </div>      </div>   </div></div>

CSS Floating Divs At Variable Heights

To my knowledge, there's no way to fix this problem with pure CSS (that works in all common browsers):

Floats don't work.
display: inline-block doesn't work.
position: relative with position: absolute requires manual pixel tuning. If you're using a server-side language, and you're working with images (or something with predictable height), you can handle the pixel tuning "automatically" with server-side code.

Instead, use jQuery Masonry.

What's the float:left; equivalent in Grid since float is not supported?

I think you have mixed inline and flex which has different approaches
to the layout.
and second you gave container and item both inline-grid property.
and What you want to do is
"<p>" with "<img>" inside a "<div>" but you give "<div>" inside "<p>" you can use "<span>" inside "<p>"
If I understand your request correctly, the following codes are what you want

.company-content {
    width: 79%;
    display: inline-grid;
}

<div class=company-content>
  
    <p><span style="width:10%; height:10%; "><img src="https://picsum.photos/500" style="width:3rem; height:3rem; float:left" /></span> Lorem Ipsum blablabla bla bla bla bla</p></div>

CSS Float Elements with Unequal Heights Left and Up in Grid