back to line when using float left

Question

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>

when using floats, you should clear them (add `clear: left` to the div with text *I'm ok here*)... some resources and examples: https://stackoverflow.com/questions/39684091, https://stackoverflow.com/questions/45728347, https://stackoverflow.com/questions/39311775 — kukkuz, Apr 30 '19 at 18:15

weegee · Answer 1 · 2019-04-30T18:10:50.837

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>

score 0 · Answer 2 · answered Apr 30 '19 at 18:36

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?

back to line when using float left

2 Answers2