CSS div float:left problem, columns have different height-Twitter bootstrap

shibly
October 23, 2019
159 views
2 votes
3 Answers

div.post {
  min-height: 40px;
}

div.a {
  width: 30%;
  float: left;
  background-color: green;
  min-height: 40px;
  border: 1px solid;
}

div.b {
  width: 35%;
  float: left;
  background-color: blue;
  min-height: 40px;
  border: 1px solid;
}

div.c {
  width: 35%;
  float: left;
  background-color: yellow;
  min-height: 40px;
  border: 1px solid;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<title>Float Left</title>

<div class="post container">
  <div class="a">Premier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw
    at Manchester United</div>
  <div class="b">at 12:00 am</div>
  <div class="c">by gm</div>

  <div class="a">Premier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw
    at Manchester United</div>
  <div class="b">at 12:00 am</div>
  <div class="c">by gm</div>

  <div class="a">Premier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw
    at Manchester United</div>
  <div class="b">at 12:00 am</div>
  <div class="c">by gm</div>

  <div class="a">Premier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw
    at Manchester United</div>
  <div class="b">at 12:00 am</div>
  <div class="c">by gm</div>

  <div class="a">Premier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw
    at Manchester United</div>
  <div class="b">at 12:00 am</div>
  <div class="c">by gm</div>
</div>

I need to make 3 column with same height. How can I do this?

Tags: css html

Answers

Don’t use floats for this, use flexbox instead. You can also use display: grid; but for your simple layout flexbox should do the job just fine.

div.post {
  min-height: 40px;
  display: flex;
  flex-wrap: wrap;
}

div.a {
  flex: 0 0 30%;
  background-color: green;
  min-height: 40px;
  border: 1px solid;
}

div.b {
  flex: 0 0 35%;
  background-color: blue;
  min-height: 40px;
  border: 1px solid;
}

div.c {
  flex: 0 0 35%;
  background-color: yellow;
  min-height: 40px;
  border: 1px solid;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<title>Float Left</title>

<div class="post container">
  <div class="a">Premier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw
    at Manchester United</div>
  <div class="b">at 12:00 am</div>
  <div class="c">by gm</div>

  <div class="a">Premier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw
    at Manchester United</div>
  <div class="b">at 12:00 am</div>
  <div class="c">by gm</div>

  <div class="a">Premier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw
    at Manchester United</div>
  <div class="b">at 12:00 am</div>
  <div class="c">by gm</div>

  <div class="a">Premier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw
    at Manchester United</div>
  <div class="b">at 12:00 am</div>
  <div class="c">by gm</div>

  <div class="a">Premier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw
    at Manchester United</div>
  <div class="b">at 12:00 am</div>
  <div class="c">by gm</div>
</div>

This seems like a perfect example to use CSS Grid, you can read about it here:

You could have something like this:

.container {
  display: grid;
  grid-template-columns: 30% 35% 35%;
}

.a {
 grid-column-start: 1;
 grid-column-end: 2;
 background-color: green;
  min-height: 40px;
  border: 1px solid;
}

.b {
 grid-column-start: 2;
 grid-column-end: 3;
 background-color: blue;
  min-height: 40px;
  border: 1px solid;
}

.c {
 grid-column-start: 3;
 grid-column-end: 4;
   background-color: yellow;
  min-height: 40px;
  border: 1px solid;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<title>Float Left</title>

<div class="post container">
  <div class="a">Premier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw
    at Manchester United</div>
  <div class="b">at 12:00 am</div>
  <div class="c">by gm</div>

  <div class="a">Premier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw
    at Manchester United</div>
  <div class="b">at 12:00 am</div>
  <div class="c">by gm</div>

  <div class="a">Premier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw
    at Manchester United</div>
  <div class="b">at 12:00 am</div>
  <div class="c">by gm</div>

  <div class="a">Premier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw
    at Manchester United</div>
  <div class="b">at 12:00 am</div>
  <div class="c">by gm</div>

  <div class="a">Premier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw
    at Manchester United</div>
  <div class="b">at 12:00 am</div>
  <div class="c">by gm</div>
</div>

You should use flex or grid for the layouts instead of float left and right.
See the below working demo.

div.post {
  min-height: 40px;
}

p.a {
  width: 30%;
  background-color: green;
  min-height: 40px;
  border: 1px solid;
}

p.b {
  width: 35%;
  background-color: blue;
  min-height: 40px;
  border: 1px solid;
}

p.c {
  width: 35%;
  background-color: yellow;
  min-height: 40px;
  border: 1px solid;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<title>Float Left</title>

<div class="post container">

  <div class="d-flex">
    <p class="a">
      Premier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at
      Manchester United
    </p>
    <p class="b">at 12:00 am</p>
    <p class="c">by gm</p>
  </div>

  <div class="d-flex">
    <p class="a">
      Premier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at
      Manchester United
    </p>
    <p class="b">at 12:00 am</p>
    <p class="c">by gm</p>
  </div>
  <div class="d-flex">
    <p class="a">
      Premier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at
      Manchester United
    </p>
    <p class="b">at 12:00 am</p>
    <p class="c">by gm</p>
  </div>
  <div class="d-flex">
    <p class="a">
      Premier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at
      Manchester United
    </p>
    <p class="b">at 12:00 am</p>
    <p class="c">by gm</p>
  </div>
  <div class="d-flex">
    <p class="a">
      Premier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at Manchester UnitedPremier League: Liverpool drop points for the 1st time after 1-1 draw at
      Manchester United
    </p>
    <p class="b">at 12:00 am</p>
    <p class="c">by gm</p>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.