Solved

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

Posted on 2014-02-18
4
611 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
[X]
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
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

Technology Partners: 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

Suggested Solutions

Title # Comments Views Activity
Fix a css menu for width 15 40
Bootstrap 3 - Style a dropdown 1 32
CSS DIV Height in Percent 1 39
CSS (jquiry mobile) question 3 34
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…
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…
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 Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

759 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