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

**bChandler** · Jan 29, 2013 17:32

Hey guys,

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

css.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:

Code:

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:

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:

.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

**ralph.m** · Jan 29, 2013 20:40

An easy option might be to do this:

Code:

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

**bChandler** · Jan 29, 2013 22:01

Originally Posted by ralph.m

An easy option might be to do this:

Code:

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

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.

**ralph.m** · Jan 29, 2013 22:22

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

Code:

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

**bChandler** · Jan 29, 2013 23:18

Originally Posted by ralph.m

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

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.

**ralph.m** · Jan 29, 2013 23:31

This is why I refuse to use frameworks. What a mess, to have to sidestep unnecessary code that just gets in the way.

Anyhow, this seems to be messing it up:

Code:

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

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

Code:

.row .span {float: none;}

**bChandler** · Jan 29, 2013 23:38

Originally Posted by ralph.m

This is why I refuse to use frameworks. What a mess, to have to sidestep unnecessary code that just gets in the way.

Anyhow, this seems to be messing it up:

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.

**ralph.m** · Jan 30, 2013 03:15

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.

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions