Apolo Radomer Apolo Radomer - 3 months ago 7
CSS Question

Align divs from different parent div at same height

I am trying to align two divs at the same height where the divs are not a part of a row div.



var divh = document.getElementById('copyTarget1').offsetHeight;
document.getElementById('copyTarget2').style.height = divh + 'px';

/* latin-ext */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/EsvMC5un3kjyUhB9ZEPPwg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}


body {
background: hsl(184,65%,49%);
margin: 0;
font-family: 'Lato';
text-align: center;
color: #fff;
font: 15px/1.4em;
}

pre {
background-color: #333;
padding: 6px;
font-size: 12px;
color: #2fbe35;
line-height: 1.3em;
}
code {
font-family: "Courier New", Courier, mono;
color: #2fbe35;
}

blockquote {
border: none;
color: #fff;
padding: 5px 20px 5px 20px;
margin-right: 30px;
margin-left: 30px;
}

.content
{
width: 100%;
margin: 0;
}

.column1 {
width: 50%;
height:auto;
float: left;
}

.column2 {
width: 50%;
height:auto;
float:left;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" debug="true"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>HTML-CSS EDITOR</title>
<meta name="generator" content="Mephisto">
<link href="./main2.css" rel="stylesheet" type="text/css">
<link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/tuupola" title="Atom feed">
<script src="./jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./jquery.jeditable.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="column1">
<h1>CSS EDITOR</h1>
<div>Replace Header Text Color: </div><input type="text" id='thebox1'>
<div>Replace Header Background Color: </div><input type="text" id='thebox2'>
<div>Replace Logo Section Background Color: </div><input type="text" id='thebox5'>
<div id="copyTarget1">
<blockquote>
<pre>
<code>
#topsection {
background-color: <b class="popup2" style="color:#fff;">#value </b>;
width:100%;
height:80px;
z-index:1;
position:absolute;
top:10px;
left:0;
color: <b class="popup1" style="color:#fff;">#value </b>;
}
</code>
</pre>
</blockquote>
</div>
<button id="copyButton1">Copy</button><br><br>
</div>
<div class="column2">
<h1></h1>
<h1>HTML EDITOR</h1>
<div>Enter header section text: </div><input type="text" id='thebox3'>
<div>Enter image link: </div><input type="text" id='thebox4'>
<div id="copyTarget2">
<blockquote>
<pre>
<code>
<xmp>
<div id="topsection">
<div id="header1"></xmp><b class="popup3" style="color:#fff;">HEADER TEXT</b><xmp></div>
<div id="header2">1 Jan 2015 - 31 Jan 2015</div>
</div>
</xmp>
</code>
</pre>
</blockquote>
</div>
<button id="copyButton2">Copy</button><br><br>
</div>
</div>





Each div (
copyTarget1
and
copyTarget2
) are parts of 2 different columns that are aligned horizontally.

Now I am trying to align the two block quote boxes as shown in the image. In the future, I might alter the code and add more input boxes. So, I don't want to put a fix height for the two block quote boxes.

The idea was to use javascript but nothing changed. The link of the website is here : LINK
enter image description here

Answer

To align the top of the blockquote section you need to make the content above that the same height in both columns.

So we wrap that content in a div (perhaps with a class of .top) and the use JS/JQ to determine which .top element is tallest and apply that height to all .top divs.

$(document).ready(function() {

  var highestBox = 0;
  $('.top').each(function() {
    if ($(this).height() > highestBox) {
      highestBox = $(this).height();
    }
  });
  $('.top').height(highestBox);

});
body {
  background: hsl(184, 65%, 49%);
  margin: 0;
  font-family: 'Lato';
  text-align: center;
  color: #fff;
  font: 15px/1.4em;
}
pre {
  background-color: #333;
  padding: 6px;
  font-size: 12px;
  color: #2fbe35;
  line-height: 1.3em;
}
code {
  font-family: "Courier New", Courier, mono;
  color: #2fbe35;
}
blockquote {
  border: none;
  color: #fff;
  padding: 5px 20px 5px 20px;
  margin-right: 30px;
  margin-left: 30px;
}
.content {
  width: 100%;
  margin: 0;
}
.column1 {
  width: 50%;
  height: auto;
  float: left;
}
.column2 {
  width: 50%;
  height: auto;
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="column1">
    <div class="top">
      <h1>CSS EDITOR</h1>
      <div>Replace Header Text Color:</div>
      <input type="text" id='thebox1'>
      <div>Replace Header Background Color:</div>
      <input type="text" id='thebox2'>
      <div>Replace Logo Section Background Color:</div>
      <input type="text" id='thebox5'>
    </div>
    <div id="copyTarget1">
      <blockquote>
        <pre>
		    <code>
#topsection {
	background-color: <b class="popup2" style="color:#fff;">#value </b>;
	width:100%;
	height:80px;
	z-index:1;
	position:absolute;
	top:10px;
	left:0;
	color: <b class="popup1" style="color:#fff;">#value </b>;
}
			</code>
		</pre>
      </blockquote>
    </div>
    <button id="copyButton1">Copy</button>
    <br>
    <br>
  </div>
  <div class="column2">
    <div class="top">

      <h1>HTML EDITOR</h1>
      <div>Enter header section text:</div>
      <input type="text" id='thebox3'>
      <div>Enter image link:</div>
      <input type="text" id='thebox4'>
    </div>
    <div id="copyTarget2">
      <blockquote>
        <pre>
		    <code>
			<xmp>
<div id="topsection">
<div id="header1"></xmp><b class="popup3" style="color:#fff;">HEADER TEXT</b><xmp></div>
<div id="header2">1 Jan 2015 - 31 Jan 2015</div>
</div>
</xmp>
			</code>
		</pre>
      </blockquote>
    </div>
    <button id="copyButton2">Copy</button>
    <br>
    <br>
  </div>
</div>

Codepen Demo

If you wish to make all the blockquotes the same height you could so that too.

Comments