Hey guys,

I'm trying to achieve the below while still retaining it's fluid/flexible/responsive layout.

css.jpg

So basically I have a 3 column section where the two images on the right are loaded with no set width and height and the div on the left is a p tag that i want to expand to match the height of the images.

Something like:

Code:
p.thisIsAnExample {
     display: block;
     max-height: 320px;
     font-size: 42px;
}
OK so the the plugin im using for the responsive images is imgLiquidFill. It takes no initial set width and height, instead taking my max-height and applying the it's picture fill techniques accordingly.

Here is the HTML and CSS for the area in question:

Code:
<div class="row">
     <div class="span4 fpBlockItem"><p>Some big callout text goes here!</p></div>
     <div class="span4 imgLiquidFill fpBlockItem">
      <img src="img/dummy-images/01.jpg" alt="01">
     </div>
     <div class="span4 imgLiquidFill fpBlockItem">
      <img src="img/dummy-images/04.jpg" alt="03">
     </div>
</div><!-- end row -->
Code:
.fpBlockItem {
max-height: 280px;
background: #2c2f31;
}
Any help would be greatly appreciated.

If it can't be done - I guess I will use a multicolumn jquery plugin - but trying to avoid that.


Thanks,
Ben