CODEWITHSUNDEEP
htmlcss
marcin7848
marcin7848

Reputation: 5

The same height 2 columns

I want those two columns, .list_of_groups and .group_management, to be the same height. I tried to use margin: 0 auto and height: 100%. No changes. The second column is always taller than the first.

How can I do that?

#show_groups {
  background-color: black;
  border: 3px dashed red;
  font-size: 1.4em;
}

#group_examiner {
  width: 100%;
  background-color: lightblue;
  text-align: center;
}

#list_of_groups {
  float: left;
  width: 30%;
  background-color: blue;
  margin: 0 auto;
}

#group_management {
  float: left;
  width: 70%;
  background-color: lightgreen;
  margin: 0 auto;
}

#group_list {
  width: 25%;
  background-color: red;
  float: left;
  text-align: center;
  margin-top: 5%;
  margin-left: 5%;
}

#group_options {
  width: 65%;
  background-color: green;
  float: left;
  text-align: center;
  margin-top: 5%;
  margin-right: 5%;
}
<div id="show_groups">

  <div id="group_examiner">first</div>
  <div id="list_of_groups">second</div>
  <div id="group_management">

    <div id="group_list">third</div>
    <div id="group_options">forth</div>

  </div>

</div>

Upvotes: 0

Views: 42

Answers (1)

Michael Coker
Michael Coker

Reputation: 53664

Add display: flex; flex-wrap: wrap to the parent to create the columns instead of using float. By default, those 2 columns will "stretch" to be the same height. 

#show_groups {
  background-color:black;
  border:3px dashed red;
  font-size:1.4em;
  display: flex;
  flex-wrap: wrap;
}

#group_examiner {
  width:100%;
  background-color:lightblue;
  text-align: center;
}

#list_of_groups {
  width:30%;
  background-color:blue;
}

#group_management {
  width:70%;
  background-color:lightgreen;
}

#group_list {
  width:25%;
  background-color:red;
  float:left;
  text-align: center;
  margin-top: 5%;
  margin-left: 5%;
}
#group_options {
  width:65%;
  background-color:green;
  float:left;
  text-align: center;
  margin-top: 5%;
  margin-right: 5%;
}
 
  <div id="show_groups">
      <div id="group_examiner">first</div>
      <div id="list_of_groups">second</div>
      <div id="group_management">
      
      <div id="group_list">third</div>
      <div id="group_options">forth</div>
      
      </div>
    </div>

Upvotes: 1

Related Questions