Need CSS to have two <div> elements floating next to each other be the same height

Posted on 2014-02-18
Last Modified: 2014-02-18
On this test page:

The 2nd and 3rd columns in the content area are styled the same way and are floating next to each other. Both contain a background image which is the dotted vertical line to the left of the column.

However, I need to make the two dotted vertical lines be the same height (client request). The amount of text in the 3rd column is causing that column to be longer, and so its divider line is also longer than the one to the left of the 2nd column.

I already have a minimum height set. Is there some way to say (via CSS): "make this column extend to the bottom of its container element"? Which in this case is <div id="content3wrap">? I have tried adding height:100% but that doesn't seem to work.

I can't have a fixed height, because different pages throughout the site are going to have different amounts of content, therefore different column heights. I just want those two <div> elements to be the same height.

Here is my CSS:

div.content3div{float:left;width:726px;min-height:382px;margin:0;padding:21px 0 9px 40px;color:#635233;background:transparent url('../img/bg_content3_divider.png') repeat-y left top;font-family:Georgia,Times,'Times New Roman',serif;}

Open in new window

Here is my HTML:

<div class="content3div content3divsplit">
	<img src="img/ph_food-service-deli-meats-roast-beef.png" alt="Roast Beef" />
<div class="content3div content3divsplit">
	<h1>Roast Beef</h1>
	<p>Our Roast Beef is slow roasted and sensational! Made from choice grade beef which is supplied to us fresh weekly.</p>

	<p><a href="pdf/6173.pdf" target="_blank"><span class="linkalt">6173</span><br />
		Roast Beef Rare<br />
		<span class="linkalt">5/7 10% Berks</span></a></p>
	<p><a href="pdf/6183.pdf" target="_blank"><span class="linkalt">6183</span><br />
		Roast Beef Medium<br />
		<span class="linkalt">5/7 1/2 Berks</span></a></p>
	<p><a href="pdf/6185.pdf" target="_blank"><span class="linkalt">6185</span><br />
		Roast Beef Medium<br />
		<span class="linkalt">5/7 20% 1/2 Berks</span></a></p>
	<p><a href="pdf/6187.pdf" target="_blank"><span class="linkalt">6187</span><br />
		Roast Beef Medium Rare<br />
		<span class="linkalt">6/8 20% 1/2 Berks</span></a></p>

Open in new window

I would really appreciate any insight. Thank you!
Question by:bbdesign
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
LVL 58

Expert Comment

ID: 39868205
Give your middle column an extra class (content3div-middle)- and your right column an extra class - content3div-right - then add this after your jQuery script

$(function() {
getmaxheight = Math.max($('.content3div-middle').height(),$('.content3div-right').height());


Open in new window

LVL 58

Accepted Solution

Gary earned 500 total points
ID: 39868238
Forget all that, just add this after your jquery script

$(function() {
getmaxheight = Math.max($('.content3div').eq(0).height(),$('.content3div').eq(1).height());

Open in new window


Author Comment

ID: 39868254
That works like a charm, thanks! I guess resorting to Javascript isn't ideal, but it seems there isn't any way to do this via CSS?
LVL 58

Expert Comment

ID: 39868266
You can do it with CSS but it is messy and since you are using jquery you may as well use it and keep your code simple.
If you want CSS ways then have a read of this and I'll think you'll agree with the jQuery way

Featured Post

Ready to get started with anonymous questions?

It's easy! Check out this step-by-step guide for asking an anonymous question on Experts Exchange.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

622 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question