5 posts in this topic

Hey guys,

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

post-179373-0-77408600-1359499578.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:


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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.