How to make floating divs and equal height

Question

First of all, this is my code for the web page

@import url("reset.css");
@import url('https://fonts.googleapis.com/css?family=Raleway');
*
{
  box-sizing:border-box;
}

body
{
  background-color: #9E9E9E; 
}

#wrapper
{
  width:95%;
  max-width:980px;
  margin: 0 auto;
  font-family: 'Raleway', sans-serif;  
  line-height: 2rem;
}


.header
{
  padding:18px;  
  background-color: #757575;    

  border-radius:5px;
  width:100%;  
  margin-top:5px;    
  margin-bottom:5px;    
}

.column_left
{
  float:left; 
  padding:18px;
  width:70%   ;
  background-color:#607D8B;
  border-top-left-radius: 5px;
  border-bottom-left-radius:5px;  
}

.column_right
{
  float:right;
  padding:18px;    
  width:29.99%; 
  background-color:#455A64;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;


}

/*For Screens 750 PX or less (width)*/
@media screen and (max-width:750px)
{
  .header
  {
    text-align:center;    
  }

  .column_right
  {
    display:none;    
  }

  .column_left
  {
    width:100%;        
    border-radius:5px;
  }
}

h1
{
  font-size:1.8rem;
}

h2
{
  font-size: 1.4rem;  

}

p
{

}

nav
{}
nav ul
{}
nav ul li
{
  width:100%;
  background-color:#607D8B;
  text-align:center;
  padding:2.5px;
  border-radius:5px;
  margin-bottom:5px;
}
nav ul li a
{
  color:#455A64;    
}


footer
{
  padding:18px;  
  background-color: #757575;    
  border-radius:5px;
  width:100%;  
  margin-top:5px;    
  margin-bottom:5px;  
  float:none;
  display:flex;
}

<meta name="viewport" content="width=device-width, user-scalable=no">

<div id="wrapper">
  <h1 class="header">Lorem Ipsum</h1>
  <div class="column_left">
    <h2>Welcome to Lorem Ipsum</h2>
    <p>Aenean nec vestibulum justo, ut aliquet ante. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Etiam viverra interdum neque, sed sagittis lectus sodales sit amet.</p>
    <p>Maecenas posuere laoreet auctor. Integer vel nulla ut magna interdum consectetur.</p>
    <p>Vestibulum non ligula sed diam luctus tincidunt in sit amet metus.</p>
  </div>
  <div class="column_right">
    <h2>Navigation</h2>
    <nav>
      <ul>
        <li><a class="button" href="#">Link</a></li>
        <li><a class="button" href="#">Link</a></li>
        <li><a class="button" href="#">Link</a></li>
      </ul>
    </nav>
  </div>
  <footer>
    &copy; 2016 Ipsum Lorem
  </footer>
</div>

Basically I would like to have the column_left and column_right classes the same height, without using height=100%. The website will have more than one page, and the length on the others may not be the same as the example page. Here is an image of what I got so far:

Basically, I want the navigation div to be as tall as the one beside it.

score 2 · Accepted Answer · answered Dec 06 '16 at 02:18

If flexbox is an option, you can give:

display: flex;
flex-wrap: wrap;

to wrapper and that will fix the heights - see demo below:

@import url("reset.css");
@import url('https://fonts.googleapis.com/css?family=Raleway');
 * {
  box-sizing: border-box;
}
body {
  background-color: #9E9E9E;
}
#wrapper {
  width: 95%;
  max-width: 980px;
  margin: 0 auto;
  font-family: 'Raleway', sans-serif;
  line-height: 2rem;
  display: flex;
  flex-wrap: wrap;
}
.header {
  padding: 18px;
  background-color: #757575;
  border-radius: 5px;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
}
.column_left {
  float: left;
  padding: 18px;
  width: 70%;
  background-color: #607D8B;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.column_right {
  float: right;
  padding: 18px;
  width: 29.99%;
  background-color: #455A64;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
/*For Screens 750 PX or less (width)*/

@media screen and (max-width: 750px) {
  .header {
    text-align: center;
  }
  .column_right {
    display: none;
  }
  .column_left {
    width: 100%;
    border-radius: 5px;
  }
}
h1 {
  font-size: 1.8rem;
}
h2 {
  font-size: 1.4rem;
}
p {} nav {} nav ul {} nav ul li {
  width: 100%;
  background-color: #607D8B;
  text-align: center;
  padding: 2.5px;
  border-radius: 5px;
  margin-bottom: 5px;
}
nav ul li a {
  color: #455A64;
}
footer {
  padding: 18px;
  background-color: #757575;
  border-radius: 5px;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
  float: none;
  display: flex;
}

<div id="wrapper">
  <h1 class="header">Lorem Ipsum</h1>
  <div class="column_left">
    <h2>Welcome to Lorem Ipsum</h2>
    <p>Aenean nec vestibulum justo, ut aliquet ante.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Etiam viverra interdum neque, sed sagittis lectus sodales sit amet.</p>
    <p>Maecenas posuere laoreet auctor. Integer vel nulla ut magna interdum consectetur.</p>
    <p>Vestibulum non ligula sed diam luctus tincidunt in sit amet metus.</p>
  </div>
  <div class="column_right">
    <h2>Navigation</h2> 
    <nav>
      <ul>
        <li><a class="button" href="#">Link</a>
        </li>
        <li><a class="button" href="#">Link</a>
        </li>
        <li><a class="button" href="#">Link</a>
        </li>
      </ul>
    </nav>
  </div>
  <footer>
    &copy; 2016 Ipsum Lorem
  </footer>
</div>

score 1 · Answer 2 · answered Dec 06 '16 at 04:20

If you can't use flexbox, which is the recommended way, and you don't want script, here is 2 options:

Since both float: right and position: absolute takes the element out of flow (in their own way), the latter will solve your problem if the left column is always higher. With an added wrapper (columns) it could look like this

@import url("reset.css");
@import url('https://fonts.googleapis.com/css?family=Raleway');
*
{
  box-sizing:border-box;
}

body
{
  background-color: #9E9E9E; 
}

#wrapper
{
  width:95%;
  max-width:980px;
  margin: 0 auto;
  font-family: 'Raleway', sans-serif;  
  line-height: 2rem;
}


.header
{
  padding:18px;  
  background-color: #757575;    
  
  border-radius:5px;
  width:100%;  
  margin-top:5px;    
  margin-bottom:5px;    
}
.columns
{
  position: relative;
}
.columns::after
{
  content: '';
  display:block;
  clear:both;
}
.column_left
{
  float:left; 
  padding:18px;
  width:70%   ;
  background-color:#607D8B;
  border-top-left-radius: 5px;
  border-bottom-left-radius:5px;  
}

.column_right{
  position: absolute;
  top: 0;
  right: 0;
  padding:18px;    
  width:30%; 
  background-color:#455A64;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  height: 100%;
}

/*For Screens 750 PX or less (width)*/
@media screen and (max-width:750px)
{
  .header
  {
    text-align:center;    
  }

  .column_right
  {
    display:none;    
  }

  .column_left
  {
    width:100%;        
    border-radius:5px;
  }
}

h1
{
  font-size:1.8rem;
}

h2
{
  font-size: 1.4rem;  

}

p
{

}

nav
{}
nav ul
{}
nav ul li
{
  width:100%;
  background-color:#607D8B;
  text-align:center;
  padding:2.5px;
  border-radius:5px;
  margin-bottom:5px;
}
nav ul li a
{
  color:#455A64;    
}


footer
{
  padding:18px;  
  background-color: #757575;    
  border-radius:5px;
  width:100%;  
  margin-top:5px;    
  margin-bottom:5px;  
  float:none;
  display:flex;
}

<meta name="viewport" content="width=device-width, user-scalable=no">

<div id="wrapper">
  <h1 class="header">Lorem Ipsum</h1>
  <div class="columns">
  <div class="column_left">
    <h2>Welcome to Lorem Ipsum</h2>
    <p>Aenean nec vestibulum justo, ut aliquet ante. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Etiam viverra interdum neque, sed sagittis lectus sodales sit amet.</p>
    <p>Maecenas posuere laoreet auctor. Integer vel nulla ut magna interdum consectetur.</p>
    <p>Vestibulum non ligula sed diam luctus tincidunt in sit amet metus.</p>
  </div>
  <div class="column_right">
    <h2>Navigation</h2>
    <nav>
      <ul>
        <li><a class="button" href="#">Link</a></li>
        <li><a class="button" href="#">Link</a></li>
        <li><a class="button" href="#">Link</a></li>
      </ul>
    </nav>
  </div>
  </div>
  <footer>
    &copy; 2016 Ipsum Lorem
  </footer>
</div>

Use display: table. With an added wrapper (columns) it could look like this:
(I favor this before the above as it is dynamic and keep both columns equal high regardless of which one is higher.)

@import url("reset.css");
@import url('https://fonts.googleapis.com/css?family=Raleway');
*
{
  box-sizing:border-box;
}

body
{
  background-color: #9E9E9E; 
}

#wrapper
{
  width:95%;
  max-width:980px;
  margin: 0 auto;
  font-family: 'Raleway', sans-serif;  
  line-height: 2rem;
}


.header
{
  padding:18px;  
  background-color: #757575;    
  
  border-radius:5px;
  width:100%;  
  margin-top:5px;    
  margin-bottom:5px;    
}
.columns
{
  display: table;
  width: 100%;
}
.column_left
{
  display: table-cell;
  padding:18px;
  width:70%;
  background-color:#607D8B;
  border-top-left-radius: 5px;
  border-bottom-left-radius:5px;  
}

.column_right{
  display: table-cell;
  padding:18px;    
  width:30%; 
  background-color:#455A64;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

/*For Screens 750 PX or less (width)*/
@media screen and (max-width:750px)
{
  .header
  {
    text-align:center;    
  }

  .column_right
  {
    display:none;    
  }

  .column_left
  {
    width:100%;        
    border-radius:5px;
  }
}

h1
{
  font-size:1.8rem;
}

h2
{
  font-size: 1.4rem;  

}

p
{

}

nav
{}
nav ul
{}
nav ul li
{
  width:100%;
  background-color:#607D8B;
  text-align:center;
  padding:2.5px;
  border-radius:5px;
  margin-bottom:5px;
}
nav ul li a
{
  color:#455A64;    
}


footer
{
  padding:18px;  
  background-color: #757575;    
  border-radius:5px;
  width:100%;  
  margin-top:5px;    
  margin-bottom:5px;  
  float:none;
  display:flex;
}

<meta name="viewport" content="width=device-width, user-scalable=no">

<div id="wrapper">
  <h1 class="header">Lorem Ipsum</h1>
  <div class="columns">
  <div class="column_left">
    <h2>Welcome to Lorem Ipsum</h2>
    <p>Aenean nec vestibulum justo, ut aliquet ante. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Etiam viverra interdum neque, sed sagittis lectus sodales sit amet.</p>
    <p>Maecenas posuere laoreet auctor. Integer vel nulla ut magna interdum consectetur.</p>
    <p>Vestibulum non ligula sed diam luctus tincidunt in sit amet metus.</p>
  </div>
  <div class="column_right">
    <h2>Navigation</h2>
    <nav>
      <ul>
        <li><a class="button" href="#">Link</a></li>
        <li><a class="button" href="#">Link</a></li>
        <li><a class="button" href="#">Link</a></li>
      </ul>
    </nav>
  </div>
  </div>
  <footer>
    &copy; 2016 Ipsum Lorem
  </footer>
</div>

score 0 · Answer 3 · edited May 23 '17 at 12:24

0

Per this similar question, you can achieve this using JavaScript.

document.getElementsByClassName("column_left")[0].style.height = document.getElementsByClassName("column_right")[0].style.height;

This will set the left column's height to the right column's height. You can switch around the code, and use the question's answers too.

edited May 23 '17 at 12:24

Community

1
1

answered Dec 06 '16 at 02:03

arbybruce

188
1
11

How to make floating divs and equal height

3 Answers3