[CSS] Can this multicolumn thingy be achieved with CSS only?

[team_NOOB]

Hey guys,

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

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:

p.thisIsAnExample {
	 display: block;
	 max-height: 320px;
	 font-size: 42px;
}
[/CODE]

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]

[CODE]
.fpBlockItem {
max-height: 280px;
background: #2c2f31;
}
[/CODE]

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

[team_NOOB]

Sorry, but editing has lapsed.

I created a jsfiddle:

http://jsfiddle.net/teamNOOB/7kLJy/

[primexx]

quite easily. probably the most straight forward and least hacky is display:table-cell

[team_NOOB]

quite easily. probably the most straight forward and least hacky is display:table-cell

Hey mate yeah we've already gone through that option. Unfortunately stupid Twitter Bootstrap is having conflicts.

Responses here: http://www.sitepoint.com/forums/showthread.php?965595-CSS-Can-this-multicolumn-thingy-be-achieved-with-CSS-only

[palenous]

I can't seem to load your jsFiddle link. Can you post a new one?

Nevermind...it seems their site is down...