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

HTML & CSS
1

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

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

2

An easy option might be to do this:

.row {display: table;}
.span4 {display: table-cell;}
3

Hey Ralph, thanks… yeah I tried that but maybe I’m not implementing properly.

I created a jsfiddle:

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

Edit:

I added the table-cell property to the span4 as you said - that didn’t work. I also added it to the fpBlockItem class as that class was being called last so it should go there. That didn’t work either.

4

There’s a lot of conflicting CSS going on there. Start with something simple and build up from there. E.g.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style media="all">
	.row {display: table;}
	.span4 {display: table-cell; vertical-align: top;}
	p {font-size: 42px;}
	.fpBlockItem {background: #2c2f31;}
	img {vertical-align: bottom;}
</style>
	
</head>
<body>

	<div class="container">
		<div class="row">
			<div class="span4 fpBlockItem">
			    <p>Some big callout text goes here!</p></div>
			<div class="span4 imgLiquidFill fpBlockItem">
			    <img src="http://dummyimage.com/370x280/666/fff" alt="01"/>
			</div>
			<div class="span4 imgLiquidFill fpBlockItem">
			    <img src="http://dummyimage.com/370x280/333/eee" alt="03"/>
			</div>
		</div><!-- end row -->
	</div>

</body>
</html>
5

Hey Ralph, thanks for the reply. Yeah I just realised that I didn’t clean up the code before I saved it, to remove all the little code i tested. Removed now.

The problem is still there - I’m using twitter bootstrap as the base (not my decision) and the code you removed prevents the layout from functioning correctly.

I updated the jsfiddle - cleaned this time.

6

This is why I refuse to use frameworks. What a mess, to have to sidestep unnecessary code that just gets in the way. :rolleyes: Anyhow, this seems to be messing it up:

[class*="span"] {
[COLOR="#FF0000"]float: left;[/COLOR]
margin-left: 20px;
min-height: 1px;
}

Either kill that or override it with something more specific in this instance, like

.row .span {float: none;}
7

Tell me about it. So sick of these frameworks that everyone thinks are freaking awesome. They are not supposed to be used on production sites!!! FFS they are rapid prototyping tools that now have morphed into a “framework” which new devs have picked up cos it’s easy for them to build a basic looking site. Grrrrrrr. /rant

Yeah I kinda need that for other code on the site. If I remove it then gotta go through and see what else if affects. Daaaamn.

Jquery it is! lol

Thanks Ralph.

8

No worries, I feel your pain. Anyhow, though, jQuery shouldn’t be needed for anything like this. If necessary, add an extra class to the wrapper and add that class to your rules to make sure they only apply to this section of code.