Forums

moprivat

Hi there, I´m looking for a quick possibilty to fix a little problem with equal height in different DIVs. One of them has three Boxes, the other one should have two. Is it possible to use Equal Height Blocks in Rows for more than one DIV? Or maybe you have some suggestions for another solution. Faux Columns etc. is known but because of the coding not possible to use ;-(.

Hope to hear from you soon!

Best to you,

Mo

Paulie_D

I can see it working with two wrapper divs. If they have the same height (via the Equal Heights method) then you could set the heights of the other 'inner' divs to 33% and 50% respectively.

Wouldn't that work?

Schmotty

A graphical representation of what you are trying to accomplish would help greatly with me understanding the problem.

Paulie_D

I assume it looks something like this: http://jsfiddle.net/Paulie_D/CQ6eH/

moprivat

Hi Paulie, yes only horizontally.

The Problem is that within every wrapper div I will have the height of the largest box for the others. This is what it looks like right now:
http://entwurf.specialframe.com/images/pic.jpg

Paulie_D

So...like this then: http://jsfiddle.net/Paulie_D/QXTu7/1/

I would think that using the Equal height technique you could ascertain the height of the tallest sub-div and apply that to the class...no?

Mottie

There is actually an article here on CSS Tricks about this... check it out here.

Also, I've taken that code and converted it into a plugin, named Equalizer. Hopefully this will take care of what you need?

moprivat

Pauli, yes that´s it. But it doesn´t seem so easy for me because I´m not very familiar with javascript.

Mottie, i even made a plugin of the code of your CCS Tricks link to try to make some changes, but i failed on my javascript knowledge. The point is that I don´t know how to integrate to different DIVs doing the same routine -> looking for the tallest hight --> apply that hight to the smaller box.

Any ideas? For know i´m using for the DIV with two boxes with fix height, the 3 smaller boxes the script of CSS Tricks.

Hope to hear from you soon.

All the best,

Mo

Mottie

The only trick to the code from that post, and my plugin version, is that all of the divs should have the same class name.

If you want a script to do each row individually, then make the top two divs have the same class name and the bottom three have a different class name. There is also this example from jQuery's map() instructions that will also equalize heights. It just looks for the "div" tag, so you'll need to use the class name for each row, separately.

It would be easier to help you if you shared the HTML and javascript you are using.

moprivat

I Integrated your plugin. Let me change the code like you said. Then we´ll see ;-).

moprivat

Mhmm, with an id it works fine, using a class it failes. I must say that I´m just a little confused, because I tried different things the whole day long. SO thank´s a lot for your support!!!

Here is an extract:


<script type="text/javascript" src="ScriptLibrary/jquery.equalizer.min.js"></script>


<div class="wrapper_content_top">

WITH THIS ID IT WORKS --><div id="content_top" class="top center">
<div class="left box_shadow test"><-- WITH THE CLASS TEST IT WONT

  <h1>bla bla bla</h1>
  <p>This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted. This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted. This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted. </p>
  <p>This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted. This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted. </p>

</div><!-- Ende section left -->

--><div class="right box_shadow test"><-- 

  <h1>Unsere Kernkompetenzen:</h1>
  <p>&nbsp;</p>
  <ul>
    <li><a href="#">Dauerhafte Haarentfernung</a></li>
    <li><a href="#">Body Contouring / Abnehmen mit Ultraschall</a></li>
    <li><a href="#">Kosmetik</a></li>
    <li><a href="#">Celullite Behandlungen</a></li>
    <li><a href="#">Permanent Makeup</a></li>
  </ul>
  </div><!-- Ende section right -->
</div><!-- Ende Content Top -->
</div><!-- Ende wrapper_content_top -->
<div class="wrapper_content_bottom">
<div id="content_bottom" class="bottom center">
<div class="test boxleft boxes box_shadow">
  <h1>IPL-Dauerhafte Haarentfernung</h1>
  <p><img src="Images/ipl2.jpg" width="275" height="208" alt="IPL" />
    </p>
  <p>This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted. </p>
</div><!-- Ende Box left -->
<div class="test boxcenter boxes box_shadow"><h1>Body Contouring</h1>
  <p><img src="Images/body.jpg" width="275" height="227" alt="body contouring" />This copy is used for placement only. It is not meant to be read. </p>
</div><!-- Ende Box Center -->

--><div class="boxright boxes box_shadow test"><--

<h1>Cellulite Behandlungen</h1>
  <p><img src="Images/celullite.jpg" width="275" height="184" alt="Celullite" />This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted.</p>
</div><!-- Ende Box right -->
</div><!-- Ende bottom center -->
</div><!-- Ende Wrapper Content Bottom -->


<script>
$(function() {
  $('.test').equalizer();
});
</script>


.wrapper_content_top {
	min-height: 400px;
	clear: both;
	background-image: url(Images/pattern.png);
	background-repeat: repeat;
	background-position: top;
	overflow: hidden;
}

.height_content {
	height: 400px;
	overflow: hidden;
}

.left {
	padding: 20px;
	float: left;
	width: 58%;
	border: 1px solid #eee;
	margin: 20px 0 30px 0;
	background-image: url(Images/content_back.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-color: #FFF;
	text-align: left;
}
.right {
	padding: 20px;
	float: right;
	width: 30%;
	border: 1px solid #eee;
	margin: 20px 0;
	background-color: #FFF;
	text-align: left;
}
.wrapper_content_bottom {
	clear: both;
	background-repeat: repeat-x;
	background-position: top;
	min-height: 350px;
	background-image: url(Images/patternstripes.png);
}
.boxleft{
	margin-left: 0px;
}

.boxcenter {
	margin-left: 30px !important;
}

.boxright{
	float: right !important;
}

.height_boxes {
	height: 320px;
	overflow: hidden;
}
.boxes {
	padding: 10px;
	background-color: #fff;
	border: 1px solid #eee;
	width: 29%;
	margin: 20px 0 70px 0;
	float: left;
}
.box_shadow {
	-webkit-box-shadow: 8px 10px 10px #dbddda;
	-moz-box-shadow: 8px 10px 10px #dbddda;
	box-shadow: 8px 10px 10px #dbddda;
}

Mottie

Oh yeah sorry, you are right! Equalizer needs to target the wrapper. And since there are two wrappers, you'll need to initialize it like this:

$('#content_top, #content_bottom').equalizer();

And by the way, the "test" class isn't needed for that plugin, unless you use the "column" option, just in case there are other elements inside of the content block that doesn't need equalized:

$('#content_top, #content_bottom').equalizer({
    columns : '.test'
});

moprivat

Mottie, awesome and that easy... It works fine. That´s it. If you are in Hamburg/Germany ons day, you´ll get a large Cup of Coffee :-).

Thanks a lot. Bye, Mo

subbu

Hello Moprivat,
I have used your code. But I didn't find the JS file "jquery.equalizer.min.js" from anywhere. Could you help me where can I get the file?

Thanks for understanding.

Mottie

@subbu Download it from here: https://github.com/CSS-Tricks/Equalizer (I recently moved it from my repos over into the CSS-Tricks repos)

subbu

Hello Mottie,
Many thanks for your quick reply. Thank you. Very much.

EricT

Hi Mottie: Thanks for offering this plugin for everyone, but I'm stuck (and thank you for any help in advance). I'm a newbe to js, and I'm not sure what, if any, css instructions I need to call out inside the .equalizer() parentheses. I have listed the wrappers for my two div.s that I want to initialize so that I can equalize the two divs to the same height. One has a slideshow in it (wrap-left), while the other has a vertical menu (wrap-right) and I need them to equalize in a responsive design as the resolution screen size changes This is my test page: http://www.bedroomandmore.com/a_ResponsiveDesignCamera.html. The vertical menu has 5 list items.
This is what I have:

$(function() { $('.wrap-left', '.wrap-right').equalizer(); });

And in an external css file (for each of my media queries) I have: .wrap-left { width: 60%; display: block; float: left; } .wrap-right { width: 39%; display: block; float: left; } .clear { clear: both; }

slideshow {

clear: both;
width: 100%;
float: left;
margin-left: 0%;
display: block;
position: relative;  
top: -1em;
z-index: 1

}

menuVertical {

clear: none;
float: left;
margin-left: .25%;
display: block;
position: relative;  
top: +.3em;

} Here is my html:

Copeland Furniture of Vermont

Lee Upholstery

    <div class="wrap-right">
    <div id="menuVertical">
      <ul id="MenuBar2" class="MenuBarVertical">
       <li><a  href=""><span class="josefinSansMidOrange">Order Online or Come Visit Us</span> <br><span class="josefinSansSmallOrange">in San Francisco and in San Carlos</span></a></li>
        <li><a href="American_Leather_Sleepers_All_Styles.html">American Leather<br><span class="josefinSansSmall">The Best American Made Sofa Sleeper<br>Now on Sale: Save $300 through October 4th, 2012</span></a></li>
        <li><a  href="Platform_Beds.html">Solid Wood Platform Beds<br><span class="josefinSansSmall">& Bedroom Furniture: Beautifully Crafted, Made in the USA.</span></a></li>
        <li><a href="Sofas.html">Benchmade Sofas<br><span class="josefinSansSmall">by Lee of North Carolina</span></a></li>
        <li><a href="Mattress.html"><span class="josefinSansSmall">Come visit us and compare our favorite top brand mattress by</span><br>Beautyrest, Serta, and Tempur-Pedic</a></li>          
      </ul>
   </div><!--Closes menuVertical div-->
 </div>
    <br class="clear"><!--Clears for Equalizer-->
 </div> <!--Closes Div Class wrap-right for height equalizer->

In my external css files I have no defined widths or heights, only auto and percentages. I think I'm very close and I would be very grateful any advice.
Thanks Much! Eric

EricT

And this is the div for wrap-left:

    <div class="wrap-left">
   <div id="slideshow">
      <div class="camera_wrap camera_cyann_skin" id="camera_wrap_1">
          <div data-src="Home_Page/copeland_soho_modern_platform_bed_roomview1000.jpg">
              <div class="camera_caption fadeFromBottom">Copeland Furniture of Vermont</div>
          </div>
          <div data-src="Home_Page/bed_storage_baronet1000.jpg">
              <div class="camera_caption fadeFromBottom">Baronet, American Made Furniture</div>
          </div>
          <div data-src="Home_Page/american_leather_best_sleeper_sofa1000.jpg">
              <div class="camera_caption fadeFromBottom">American Leather</div>
</div>
          <div data-src="Home_Page/american_leather_best_family_sleeper_sofa1000.jpg">
              <div class="camera_caption fadeFromBottom">American Leather</div>
          </div>
          <div data-src="Home_Page/beautyrest_mattress_view_1000.jpg">
              <div class="camera_caption fadeFromBottom">Beautyrest Mattresses</div>
          </div>
          <div data-src="Home_Page/sofas_lee_1000.jpg">
              <div class="camera_caption fadeFromBottom">Lee Upholstery</div>
          </div>
      </div><!-- Closes Div ID camera_wrap_1 -->
    </div><!--Closes Div ID slideshow-->
    <br class="clear">
    </div><!--Closes Div Class wrap-left for height equalizer-->

Mottie

Hi EricT!

If you only have two divs to adjust, try using the code from this .map() example. It's a similar solution. The Equalizer plugin is better for divs on multiple rows and is really just extra bloat.

treehouse : what would you like to learn today?

Forums

Equal Height Blocks for more than one DIV?

slideshow {

menuVertical {