Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2014-02-18
4
Medium Priority
?
640 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 2000 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses

971 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