• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 644
  • Last Modified:

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

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
bbdesign
Asked:
bbdesign
  • 3
1 Solution
 
GaryCommented:
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
 
GaryCommented:
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
 
bbdesignAuthor Commented:
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
 
GaryCommented:
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

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now