SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    An easy option might be to do this:

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

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    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>

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    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;}

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •