5 posts in this topic

Posted

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;

}

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:

<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 -->


.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

Share this post


Link to post
Share on other sites

Posted

Sorry, but editing has lapsed.

I created a jsfiddle:

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

Share this post


Link to post
Share on other sites

Posted

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

Share this post


Link to post
Share on other sites

Posted

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.