back to line when using float left [duplicate] - html

Question

This question already has answers here:
Floated elements of variable height push siblings down
(3 answers)
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 3 years ago.
I should align the fixed width divs.
I have a container with a fixed width
I have dynamic divs inside but they also have a fixed width.
I would like to put 4 divs per line.
So I used CSS's float rule
My actual problem is that when the last div (card) on the line has a short height the next card gets under it.
What I'm expecting is the next div get back to a complete line.
.card {
width:200px;
height:200px;
border: 1px solid black;
float: left;
}
.container {
width: 900px;
}
.shortcard {
height:50px
}
<div class="container">
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card shortcard">
</div>
<div class="card">
It should be in next line
</div>
<div class="card">
</div>
</div>
When the height is longer, the element is getting to another line
.card {
width:200px;
height:200px;
border: 1px solid black;
float: left;
}
.container {
width: 900px;
}
.shortcard {
height:50px
}
<div class="container">
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card ">
</div>
<div class="card">
I'm ok here
</div>
<div class="card">
</div>
</div>

Answer 1

I think that what you are trying to achieve is that, you don't want the long div to come under the short div. So for that, you have to use inline-block with float: left like
.card {
width: 200px;
height: 200px;
border: 1px solid black;
display: inline-block; /* to line up the divs in a single line */
float:left; /* to make them stick to the top */
}
.card {
width: 200px;
height: 200px;
border: 1px solid black;
display: inline-block;
float: left;
}
.container {
width: 100%;
}
.shortcard {
height: 50px;
}
body,
html {
height: 100%;
}
.container {
width: 100%;
height: 100%;
}
<div class="container">
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card shortcard">
</div>
<div class="card containerdivNewLine">
beside short div but not under it
</div>
<div class="card">
</div>
</div>

Answer 2

Okay, I try to fix this in your code, so that you understand better!
so basic changes are css, create a new class .container and use display: flex properties.
have a look:
<div class="container">
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
I'm ok here
</div>
<div class="card">
</div>
</div>
.card {
width:200px;
height:200px;
border: 1px solid black;
display: inline-flex;
}
.container
{
display: flex;
width: 900px;
}
.card {
width:200px;
height:200px;
border: 1px solid black;
display: inline-flex;
}
.container
{
display: flex;
width: 900px;
}
<div class="container">
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
I'm ok here
</div>
<div class="card">
</div>
</div>
run the code, and let me know if you want a design like this or not?