Solved

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

Posted on 2014-02-18
4
592 Views
Last Modified: 2014-02-18
On this test page:
http://bbdesign.com/berksfoods.com/food-service-deli-meats-roast-beef.htm

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;}
div.content3divsplit{width:343px;}

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>
<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>

	<h4>PRODUCT SHEETS</h4>
	<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>
</div>

Open in new window


I would really appreciate any insight. Thank you!
0
Comment
Question by:bbdesign
  • 3
4 Comments
 
LVL 58

Expert Comment

by:Gary
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

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

$('.content3div-middle').height(getmaxheight);
$('.content3div-right').height(getmaxheight);
})
</script>  

Open in new window

0
 
LVL 58

Accepted Solution

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

<script>
$(function() {
getmaxheight = Math.max($('.content3div').eq(0).height(),$('.content3div').eq(1).height());
$('.content3div').height(getmaxheight);
})
</script>   

Open in new window

0
 

Author Comment

by:bbdesign
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?
0
 
LVL 58

Expert Comment

by:Gary
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
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
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…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

808 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