Sign in to follow this  

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

Recommended Posts

team_NOOB    16

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

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

Share this post


Link to post
Share on other sites
palenous    4

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  

  • Recently Browsing   0 members

    No registered users viewing this page.